# Loader

Indicates a background process is active. Use loader for large components or large section within a page

import Anatomy from "../../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../../components/StubFooter.astro";
import DoDont from "../../../../../../components/DoDont.astro";
import Callout from "../../../../../../components/Callout.astro";
import TermList from "../../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.loader.overview"
  source="components/dist/registries/dskit.json#loader"
  schema={1}
/>

<ComponentTabs component={"loader"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="medium" field="content" value="medium" />
</div>

<MediaAsset src="/media/loader/preview.png" alt="" />

## Overview

Indicates a background process is active. Use loader for large components or large section within a page

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Container","description":"the bounding surface — typically a status region or live region"},{"name":"Status icon","description":"glyph + color reinforcing severity (info, success, warning, error)"},{"name":"Title (optional)","description":"short headline summarizing the message"},{"name":"Message","description":"the body content explaining what happened and (if applicable) what to do"},{"name":"Action (optional)","description":"primary action — retry, undo, dismiss, view details"},{"name":"Dismiss control (optional)","description":"explicit close affordance for transient feedback"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Percent","values":["99%","10%","Percent3"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"success-toast","note":"transient feedback follows the toast enter/exit timing curve"},"pattern":{"slug":"success-toast","name":"Success Toast","phases":[{"Phase":"Entry","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Slides in from the bottom"},{"Phase":"Hold","Duration":"`delay-long` (500ms as token; 4000ms total hold)","Easing":"—","Behavior":"Settle time after entry completes before auto-dismiss timer begins"},{"Phase":"Exit","Duration":"duration-fast","Easing":"ease-exit","Behavior":"Fades out quickly"}]}},{"ref":{"ref":"skeleton-loading","note":"loader-with-logo + loading-skeleton inherit the skeleton pulse cadence"},"pattern":{"slug":"skeleton-loading","name":"Skeleton Loading","phases":[{"Duration":"`2000ms` (looping)","Easing":"linear","Behavior":"A continuous, subtle gradient shimmer moving left-to-right. Not tokenized — value is fixed. Provides visual confirmation the system is active and reduces perceived wait time for data-heavy views."}]}},{"ref":{"ref":"state-transitions","note":"severity transitions (e.g. error → success) cross-fade rather than swap"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=7372-2195)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/loader)