Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Adobe Spectrum - ProgressBar
Getting started
Adobe Spectrum
Spectrum UI
Pro
Components
Autocomplete
Breadcrumbs
Button
Calendar
Checkbox
Checkbox Group
Color Area
Color Field
Color Picker
Color Slider
Color Swatch
Color Swatch Picker
Color Wheel
Combo Box
Date Field
Date Picker
Date Range Picker
Dialog
Disclosure
Disclosure Group
Drop Zone
File Trigger
Form
Grid List
Group
Link
List Box
Menu
Meter
Modal
Number Field
Popover
Progress Bar
Radio Group
Range Calendar
Search Field
Select
Slider
Switch
Table
Tabs
Tag Group
Text Field
Time Field
Toast
Toggle Button
Toggle Button Group
Toolbar
Tooltip
Tree
Virtualizer
Advanced
React Aria Components
Styling
<li><strong>Flexible</strong> – Support for custom value scales, formatting, and visual representations.</li> </ul> <h2>Anatomy</h2> <div class="anatomy-section"> <p>Progress bars consist of:</p> <ul> <li><strong>Track element</strong> - showing the full progress of an operation</li> <li><strong>Fill element</strong> - showing the current progress</li> <li><strong>Label</strong> - describing the operation</li> <li><strong>Value label</strong> - showing the current value (optional)</li> </ul> </div> <h2>Interactive Examples</h2> <div class="example-section"> <div class="example-title">Controllable Progress Bar</div> <div class="controls"> <div class="control-group"> <label for="progress-value">Progress Value:</label> <input type="range" id="progress-value" min="0" max="100" value="50"> <span id="progress-display">50%</span> </div> <button id="animate-btn">Animate Progress</button> </div> <div class="react-aria-ProgressBar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-valuetext="50%" id="controllable-progress"> <label class="react-aria-Label">Processing…</label> <span class="value">50%</span> <div class="bar"> <div class="fill" style="width: 50%"></div> </div> </div> </div> <div class="example-section"> <div class="example-title">Custom Value Scale</div> <div class="react-aria-ProgressBar" role="progressbar" aria-valuenow="100" aria-valuemin="50" aria-valuemax="150" aria-valuetext="100 of 150"> <label class="react-aria-Label">Custom Scale…</label> <span class="value">100 of 150</span> <div class="bar"> <div class="fill" style="width: 50%"></div> </div> </div> </div> <div class="example-section"> <div class="example-title">Indeterminate Progress</div> <button id="toggle-indeterminate">Toggle Indeterminate</button> <div class="react-aria-ProgressBar" role="progressbar" aria-label="Loading…" id="indeterminate-progress"> <label class="react-aria-Label">Loading…</label> <div class="bar"> <div class="fill" style="width: 120px"></div> </div> </div> </div> <div class="example-section"> <div class="example-title">Custom Formatting</div> <div class="controls"> <div class="control-group"> <label for="format-type">Format Type:</label> <select id="format-type"> <option value="percent">Percentage</option> <option value="currency">Currency (JPY)</option> <option value="decimal">Decimal</option> <option value="custom">Custom Label</option> </select> </div> </div> <div class="react-aria-ProgressBar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" aria-valuetext="60%" id="formatted-progress"> <label class="react-aria-Label">Sending…</label> <span class="value">60%</span> <div class="bar"> <div class="fill" style="width: 60%"></div> </div> </div> </div> <div class="example-section"> <div class="example-title">Circular Progress</div> <div class="controls"> <div class="control-group"> <label for="circular-value">Circular Progress:</label> <input type="range" id="circular-value" min="0" max="100" value="60"> <span id="circular-display">60%</span> </div> </div> <div class="react-aria-ProgressBar circular-progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" aria-valuetext="60%" id="circular-progress"> <svg width="64" height="64" viewBox="0 0 32 32"> <circle cx="16" cy="16" r="11.75" stroke="var(--border-color)" stroke-width="0.5" fill="none"/> <circle cx="16" cy="16" r="12.25" stroke="var(--border-color)" stroke-width="0.5" fill="none"/> <circle cx="16" cy="16" r="12" stroke="var(--highlight-background)" stroke-width="4" fill="none" stroke-dasharray="75.4 75.4" stroke-dashoffset="30.16" stroke-linecap="round" id="circular-fill"/> </svg> </div> </div> <h2>Component Composition</h2> <div class="component-grid"> <div class="component-card"> <h4>ProgressBar</h4> <p>The main wrapper component that provides ARIA progressbar semantics and manages state.</p> </div> <div class="component-card"> <h4>Label</h4> <p>Provides context and description for the progress bar operation.</p> </div> </div> <h2>Styling</h2> <div class="code-block">.react-aria-ProgressBar { display: grid; grid-template-areas: "label value" "bar bar"; grid-template-columns: 1fr auto; gap: 4px; width: 250px; color: var(--text-color);}.react-aria-ProgressBar .bar { grid-area: bar; box-shadow: inset 0px 0px 0px 1px var(--border-color); height: 10px; border-radius: 5px; overflow: hidden; background: var(--spectrum-global-color-gray-200);}.react-aria-ProgressBar .fill { background: var(--highlight-background); height: 100%; transition: width 0.3s ease;} </div> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on GitHub, or updating this file.</p> <script type="module"> const progressSlider = document.getElementById('progress-value'); const progressDisplay = document.getElementById('progress-display'); const controllableProgress = document.getElementById('controllable-progress'); const animateBtn = document.getElementById('animate-btn'); const toggleIndeterminateBtn = document.getElementById('toggle-indeterminate'); const indeterminateProgress = document.getElementById('indeterminate-progress'); const formatSelect = document.getElementById('format-type'); const formattedProgress = document.getElementById('formatted-progress'); const circularSlider = document.getElementById('circular-value'); const circularDisplay = document.getElementById('circular-display'); const circularProgress = document.getElementById('circular-progress'); let isAnimating = false; let isIndeterminate = true; progressSlider.addEventListener('input', (e) => { const value = e.target.value; progressDisplay.textContent = value + '%'; controllableProgress.setAttribute('aria-valuenow', value); controllableProgress.setAttribute('aria-valuetext', value + '%'); controllableProgress.querySelector('.value').textContent = value + '%'; controllableProgress.querySelector('.fill').style.width = value + '%'; }); animateBtn.addEventListener('click', () => { if (isAnimating) return; isAnimating = true; animateBtn.disabled = true; animateBtn.textContent = 'Animating...'; let currentValue = 0; const interval = setInterval(() => { currentValue += 2; if (currentValue > 100) { currentValue = 100; clearInterval(interval); isAnimating = false; animateBtn.disabled = false; animateBtn.textContent = 'Animate Progress'; } progressSlider.value = currentValue; progressDisplay.textContent = currentValue + '%'; controllableProgress.setAttribute('aria-valuenow', currentValue); controllableProgress.setAttribute('aria-valuetext', currentValue + '%'); controllableProgress.querySelector('.value').textContent = currentValue + '%'; controllableProgress.querySelector('.fill').style.width = currentValue + '%'; }, 50); }); toggleIndeterminateBtn.addEventListener('click', () => { if (isIndeterminate) { indeterminateProgress.setAttribute('aria-valuenow', '50'); indeterminateProgress.setAttribute('aria-valuetext', '50%'); indeterminateProgress.querySelector('.fill').style.width = '50%'; indeterminateProgress.querySelector('.fill').style.animation = 'none'; toggleIndeterminateBtn.textContent = 'Make Indeterminate'; isIndeterminate = false; } else { indeterminateProgress.removeAttribute('aria-valuenow'); indeterminateProgress.removeAttribute('aria-valuetext'); indeterminateProgress.querySelector('.fill').style.width = '120px'; indeterminateProgress.querySelector('.fill').style.animation = 'indeterminate 1.5s infinite ease-in-out'; toggleIndeterminateBtn.textContent = 'Make Determinate'; isIndeterminate = true; } }); formatSelect.addEventListener('change', (e) => { const value = 60; const valueElement = formattedProgress.querySelector('.value'); switch (e.target.value) { case 'percent': valueElement.textContent = '60%'; formattedProgress.setAttribute('aria-valuetext', '60%'); break; case 'currency': valueElement.textContent = '¥60'; formattedProgress.setAttribute('aria-valuetext', '¥60'); break; case 'decimal': valueElement.textContent = '60.0'; formattedProgress.setAttribute('aria-valuetext', '60.0'); break; case 'custom': valueElement.textContent = '60 of 100 items'; formattedProgress.setAttribute('aria-valuetext', '60 of 100 items'); break; } }); circularSlider.addEventListener('input', (e) => { const value = e.target.value; const percentage = value / 100; const circumference = 2 * Math.PI * 12; const offset = circumference - (percentage * circumference); circularDisplay.textContent = value + '%'; circularProgress.setAttribute('aria-valuenow', value); circularProgress.setAttribute('aria-valuetext', value + '%'); const circularFill = document.getElementById('circular-fill'); circularFill.style.strokeDashoffset = offset; }); indeterminateProgress.querySelector('.fill').style.animation = 'indeterminate 1.5s infinite ease-in-out'; </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">