Progress

Visualize completion status with Chassis CSS's progress component system, featuring accessible markup, stacked displays, and comprehensive theming support.

Introduction

Progress bars in Chassis CSS provide visual feedback for user actions, system processes, and completion status through accessible, customizable components. Built with semantic HTML and comprehensive ARIA support, progress bars integrate seamlessly with your design system while maintaining optimal performance and accessibility standards.

Unlike the HTML5 <progress> element, Chassis CSS progress components offer enhanced styling flexibility and support for advanced features like stacked progress displays, animated backgrounds, and custom content overlays. The component architecture uses CSS custom properties for runtime theming while maintaining consistent visual hierarchy across your application.

Chassis CSS progress bars feature a two-element structure for optimal flexibility:

Wrapper element (.progress) defines the maximum value and accessibility context
Bar element (.progress-bar) handles visual presentation and progress indication
Stacked layouts (.progress-stacked) enable multi-segment progress visualization
Accessibility integration through proper ARIA attributes and semantic markup
CSS custom properties for seamless theming and brand consistency

Implementation

Before implementing progress bars, ensure these accessibility and markup considerations are addressed:

Include proper role="progressbar" on wrapper elements for screen reader compatibility
Provide descriptive labels using aria-label, aria-labelledby, or similar attributes
Set appropriate aria-valuenow, aria-valuemin, and aria-valuemax values for current progress state
Use inline styles, utility classes, or custom CSS to control visual width representation
Consider color contrast requirements when implementing custom themes or background colors

Examples

Explore practical progress bar implementations demonstrating structure variations, sizing options, and styling techniques. These examples showcase Chassis CSS's flexible progress system across various use cases.

Basic implementation

This foundational example demonstrates essential progress bar structure with proper accessibility attributes. Progress values are controlled through aria-valuenow and visual width styling.

html

<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 0%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 100%"></div>
</div>

Width control

Configure progress bar width using Chassis CSS's sizing utilities or custom CSS for dynamic width management based on your application requirements.

html

<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar w-75"></div>
</div>

Height customization

Adjust progress bar height by setting a height value on the .progress container. The inner .progress-bar automatically adapts to maintain proper proportions and visual consistency.

html

<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
  <div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px">
  <div class="progress-bar" style="width: 25%"></div>
</div>

Content labels

Enhance progress bars with descriptive text by placing content within the .progress-bar element. Text automatically inherits appropriate styling for optimal readability.

25%

html

<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%">25%</div>
</div>

Long label handling

Content within .progress-bar uses overflow: hidden by default to prevent visual overflow. For longer labels, apply overflow utilities like .overflow-visible to modify this behavior as needed.

Consider accessibility when using visible overflow. Labels extending beyond progress bars may not provide adequate color contrast with both the .progress background and .progress-bar colors. For optimal accessibility, consider displaying labels outside the progress bar structure when content length varies significantly.

Color themes

Apply background utilities to customize progress bar appearance with your brand colors and semantic meaning indicators.

html

<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-success" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-info" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-warning" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-danger" style="width: 100%"></div>
</div>

Accessibility tip: Color alone shouldn't convey meaning as it's not perceived by assistive technology users. Ensure clarity through text with adequate contrast, ARIA attributes where needed, and consider using .visually-hidden for screen reader content.

Accessible color labeling

When using custom background colors with labels, ensure sufficient contrast by applying contrast utilities for optimal readability.

25%

50%

75%

100%

html

<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar fg-contrast bg-success" style="width: 25%">25%</div>
</div>
<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar fg-contrast bg-info" style="width: 50%">50%</div>
</div>
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar fg-contrast bg-warning" style="width: 75%">75%</div>
</div>
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar fg-contrast bg-danger" style="width: 100%">100%</div>
</div>

Multi-segment displays

Create complex progress visualizations using .progress-stacked containers with multiple progress components. Each segment maintains individual accessibility attributes while contributing to the overall progress indication.

html

<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
    <div class="progress-bar"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
    <div class="progress-bar bg-success"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <div class="progress-bar bg-info"></div>
  </div>
</div>

Striped patterns

Apply .striped to any .progress-bar to create visual texture through CSS gradient patterns over the background color.

html

<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar striped" style="width: 10%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar striped bg-success" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar striped bg-info" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar striped bg-warning" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar striped bg-danger" style="width: 100%"></div>
</div>

Animated stripes

Enhance striped progress bars with motion by adding .animated to create flowing stripe animations using CSS3 transforms.

html

<div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar striped animated" style="width: 75%"></div>
</div>

CSS

This component can be customized using CSS variables, allowing for styles to be modified dynamically on the page. These CSS variables are part of Chassis CSS's design token system, giving design teams control over component appearance. See the design tokens page for more details.

Custom properties

These CSS variables control the component's appearance and can be modified dynamically on the page. Components use cascading variables, allowing seamless variations in size, color, and style without redundant style declarations through component inheritance and the context class system.

scss/_progress.scss

--#{$prefix}height: var(--#{$prefix}progress-height, #{$progress-height});
@include rfs($progress-font-size, --#{$prefix}font-size);
@include rfs($progress-line-height, --#{$prefix}line-height);
--#{$prefix}bg-color: var(--#{$prefix}progress-bg-color, #{$progress-bg-color});
--#{$prefix}border-radius: var(--#{$prefix}progress-border-radius, #{$progress-border-radius});
--#{$prefix}box-shadow: var(--#{$prefix}progress-box-shadow, #{$progress-box-shadow});
--#{$prefix}bar-fg-color: var(--#{$prefix}progress-bar-fg-color, #{$progress-bar-fg-color});
--#{$prefix}bar-bg-color: var(--#{$prefix}progress-bar-bg-color, #{$progress-bar-bg-color});
--#{$prefix}bar-transition: var(--#{$prefix}progress-bar-transition, #{$progress-bar-transition});
--#{$prefix}bar-animation-timing: var(--#{$prefix}progress-bar-animation-timing, #{$progress-bar-animation-timing});

Sass variables

These Sass variables are also exposed as CSS custom properties using the --cx- prefix. A Sass variable $variable-name becomes available as --cx-variable-name in CSS, allowing for styles to be modified dynamically on the page. See the context components page for more details.

scss/_variables.scss

$progress-height:                   1rem;
$progress-font-size:                #{calc(#{$font-size-base} * .75)};
$progress-line-height:              #{calc(#{$line-height-base} * .75)};
$progress-bg-color:                 var(--#{$prefix}bg-even);
$progress-border-radius:            var(--#{$prefix}border-radius-medium);
$progress-box-shadow:               var(--#{$prefix}box-shadow-inset);
$progress-bar-fg-color:             $white;
$progress-bar-bg-color:             $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

Animation keyframes

CSS animations for progress bar are defined within the progress component stylesheet, providing smooth stripe motion effects.

scss/_progress.scss

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}