Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Getting started
Github Primer
Primer UI
Pro
Components
Action Bar
Action List
Action Menu
Anchored Overlay
Autocomplete
Avatar
Avatar Pair
Avatar Stack
Banner
Blankslate
Border Box
Box
Branch Name
Breadcrumbs
Button
Button Group
Button Marketing
Checkbox
Checkbox Group
Circle Badge
Circle Octicon
Clipboard Copy
Clipboard Copy Button
Close Button
Comment Box
Counter Label
Data Table
Details
Dialog
Form Control
Header
Heading
Hidden Text Expander
Icon
Icon Button
Image
Inline Message
Label
Label Group
Layout
Link
Markdown
Nav List
Octicon Symbols
Overlay
Page Header
Page Layout
Pagehead
Pagination
Pointer Box
Popover
Progress Bar
Radio
Radio Group
Relative Time
Segmented Control
Select
Selectpanel
Skeleton Avatar
Skeleton Box
Skeleton Text
Spinner
Split Page Layout
Stack
State Label
Subnav
Tab Container
Tab Nav
Tab Panels
Text
Text Input
Text Input With Tokens
Textarea
Timeline
Timeline Item
Toggle Switch
Token
Tooltip
Tree View
Truncate
Underline Nav
Underline Panels
<div class="do-dont-container"> <div class="do-dont-item do-item"> <div class="do-dont-title do-title">✓ Do</div> <div class="progress-text">Limit segments (3-4 max)</div> <div class="progress-bar-container"> <div class="progress-segment color-success" style="width: 40%;"></div> <div class="progress-segment color-attention" style="width: 30%;"></div> <div class="progress-segment color-accent" style="width: 30%;"></div> </div> <p class="f6 mt-2 mb-0">Limit the number of segments.</p> </div> <div class="do-dont-item dont-item"> <div class="do-dont-title dont-title">✗ Don't</div> <div class="progress-text">Too many segments</div> <div class="progress-bar-container"> <div class="progress-segment color-success" style="width: 15%;"></div> <div class="progress-segment color-attention" style="width: 12%;"></div> <div class="progress-segment color-accent" style="width: 18%;"></div> <div class="progress-segment color-danger" style="width: 10%;"></div> <div class="progress-segment color-done" style="width: 20%;"></div> <div class="progress-segment" style="width: 25%; background-color: var(--color-neutral-emphasis);"></div> </div> <p class="f6 mt-2 mb-0">Don't overload a progress bar with too many segments.</p> </div> </div> </div> <!-- Options Section --> <div class="mb-6"> <h2 class="h2 mb-4">Options</h2> <!-- Multiple Segments --> <div class="demo-section"> <div class="demo-title">With multiple segments</div> <p class="f5 mb-3">A progress bar may use segments to represent multiple parts of a whole.</p> <div class="progress-text">Tasks: 8 completed, 3 in progress, 2 pending</div> <div class="progress-bar-container"> <div class="progress-segment color-success" style="width: 61.5%;"></div> <div class="progress-segment color-attention" style="width: 23.1%;"></div> <div class="progress-segment color-accent" style="width: 15.4%;"></div> </div> <div class="progress-legend"> <div class="legend-item"> <div class="legend-color" style="background-color: var(--color-success-emphasis);"></div> <span>Completed (8)</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--color-attention-emphasis);"></div> <span>In Progress (3)</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--color-accent-emphasis);"></div> <span>Pending (2)</span> </div> </div> </div> <!-- Color Options --> <div class="demo-section"> <div class="demo-title">Color</div> <p class="f5 mb-3">The color of the filled part(s) of the progress bar may be customized. Default to using success.emphasis for a single segment.</p> <div class="mb-3"> <div class="progress-text">Success (default): 70%</div> <div class="progress-bar-container"> <div class="progress-segment color-success" style="width: 70%;"></div> </div> </div> <div class="mb-3"> <div class="progress-text">Accent: 85%</div> <div class="progress-bar-container"> <div class="progress-segment color-accent" style="width: 85%;"></div> </div> </div> <div class="mb-3"> <div class="progress-text">Attention: 45%</div> <div class="progress-bar-container"> <div class="progress-segment color-attention" style="width: 45%;"></div> </div> </div> </div> <!-- Size Options --> <div class="demo-section"> <div class="demo-title">Size</div> <p class="f5 mb-3">The size may be adjusted to adapt the progress bar to different contexts.</p> <div class="mb-3"> <div class="progress-text">Small</div> <div class="progress-bar-container size-small"> <div class="progress-segment color-success" style="width: 60%;"></div> </div> </div> <div class="mb-3"> <div class="progress-text">Medium (default)</div> <div class="progress-bar-container"> <div class="progress-segment color-success" style="width: 60%;"></div> </div> </div> <div class="mb-3"> <div class="progress-text">Large</div> <div class="progress-bar-container size-large"> <div class="progress-segment color-success" style="width: 60%;"></div> </div> </div> </div> <!-- Width Options --> <div class="demo-section"> <div class="demo-title">Width</div> <p class="f5 mb-3">By default, a progress bar will fill its parent. However, a progress bar can be any width.</p> <div class="mb-3"> <div class="progress-text">Full width</div> <div class="progress-bar-container"> <div class="progress-segment color-success" style="width: 75%;"></div> </div> </div> <div class="mb-3 width-demo"> <div class="progress-text">Custom width (300px)</div> <div class="progress-bar-container"> <div class="progress-segment color-success" style="width: 75%;"></div> </div> </div> </div> </div> <!-- Accessibility Section --> <div class="mb-6"> <h2 class="h2 mb-4">Accessibility</h2> <div class="Box p-4 mb-4 border-radius-2"> <h3 class="h4 mb-3">Key accessibility considerations:</h3> <ul class="ml-4"> <li class="mb-2">When rendering multiple segments, segment colors should have a 3:1 contrast ratio with adjacent segments</li> <li class="mb-2">Progress bars can only be interpreted by sighted users - include text descriptions for screen readers</li> <li class="mb-2">Use descriptive text like "tasks: 8 of 10 complete" for single segments</li> <li class="mb-2">For multiple segments: "tasks: 80 done, 14 in progress, 6 open"</li> <li class="mb-2">Don't use redundant labels if progress value is already shown as adjacent text</li> </ul> </div> <!-- Accessibility Examples --> <div class="demo-section"> <div class="demo-title">Good accessibility example</div> <div class="progress-text" role="status" aria-live="polite"> File upload progress: 8 of 10 files complete </div> <div class="progress-bar-container" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" aria-label="File upload progress"> <div class="progress-segment color-success" style="width: 80%;"></div> </div> </div> <div class="demo-section"> <div class="demo-title">Multiple segments with proper labeling</div> <div class="progress-text" role="status" aria-live="polite"> Project status: 45 tasks done, 25 in progress, 30 remaining </div> <div class="progress-bar-container" role="img" aria-label="Project completion status showing 45 done, 25 in progress, and 30 remaining tasks"> <div class="progress-segment color-success" style="width: 45%;"></div> <div class="progress-segment color-attention" style="width: 25%;"></div> <div class="progress-segment color-accent" style="width: 30%;"></div> </div> <div class="progress-legend"> <div class="legend-item"> <div class="legend-color" style="background-color: var(--color-success-emphasis);"></div> <span>Done (45)</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--color-attention-emphasis);"></div> <span>In Progress (25)</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--color-accent-emphasis);"></div> <span>Remaining (30)</span> </div> </div> </div> </div> <!-- Footer --> <div class="border-top pt-4"> <h2 class="h4 mb-3">Resources</h2> <p class="f5"> <a href="#" class="Link--primary">React component documentation</a> | <a href="#" class="Link--primary">Rails component documentation</a> | <a href="#" class="Link--primary">Figma design file</a> | <a href="#" class="Link--primary">Accessibility guidelines</a> </p> <h3 class="h5 mt-4 mb-2">Feedback</h3> <p class="f6 color-fg-muted"> Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub. </p> </div> </div> <script> // Add interactive functionality document.addEventListener('DOMContentLoaded', function() { // Animate progress bars on load const progressSegments = document.querySelectorAll('.progress-segment'); progressSegments.forEach(segment => { const width = segment.style.width; segment.style.width = '0%'; setTimeout(() => { segment.style.width = width; }, 100); }); // Add hover effects for interactive elements const demoSections = document.querySelectorAll('.demo-section'); demoSections.forEach(section => { section.addEventListener('mouseenter', function() { this.style.borderColor = 'var(--color-accent-emphasis)'; }); section.addEventListener('mouseleave', function() { this.style.borderColor = 'var(--color-border-default)'; }); }); }); </script></body></html>' width="100%" height="2400" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">