---
title: "Loading"
url: "https://developer.incode.com/design-and-ux/loading/"
section: "design-and-ux"
group: "Prizma Design Foundations / Components"
version: "v1.1"
status: "live"
---
# Loading

Loading components communicate that the system is working. Prizma provides a spinner for indeterminate states and a progress bar for determinate ones. Both are used extensively in biometric capture and verification screens.

## Try it live

<div class="dh-demo"><p class="dh-demo-label">Live — indeterminate spinner and determinate progress</p><span class="dh-pz-spinner"></span><span class="dh-pz-progress"><i></i></span></div>

<div class="dh-rule"><span>Variants</span><i></i></div>

<div class="dh-var-grid"><div class="dh-var" style="background:#006aff08"><div class="dh-var-stage"><span class="dh-pz-spinner"></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#006aff14;color:#006aff">Spinner</span><code>.loading-spinner</code><p>Indeterminate. Use when the wait time is unknown — processing, uploading, verifying.</p></div></div><div class="dh-var" style="background:transparent"><div class="dh-var-stage"><span class="dh-pz-progress"><i></i></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#189f6014;color:#189f60">Progress bar</span><code>.loading-progress</code><p>Determinate. Use when progress is measurable — multi-step flows, uploads with known size.</p></div></div></div>

<div class="dh-rule"><span>Tokens</span><i></i></div>

```dh-comp-tokens
--spinner-track-color | Spinner ring — background arc | Component
--spinner-fill-color | Spinner ring — active arc | Component
--loading-bar-track | Progress bar track background | Component
--loading-bar-fill | Progress bar fill color | Component
--loading-bar-height | Bar height | Component
--radius-loading-bar | Bar corner radius | Semantic
```

> 📘 Component tokens
>
> The color tokens for this component live in [Color → Tokens](/design-and-ux/color/), and its spacing, radius, and type map to the shared foundation scales.