Progress Component

Axiom01's progress components provide visual feedback on the status of ongoing processes, such as loading, uploading, or task completion. They are designed to be clear, informative, and accessible.

Live Example: Linear Progress Bar

Basic Progress

Labeled Progress

50%

Colored Progress

HTML Structure: Linear Progress

A linear progress bar consists of a container with the .progress class and an inner <div> that represents the progress.

<!-- Basic Progress -->
	 <div class="progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
			 <div style="width: 25%;"></div>
	 </div>

	 <!-- Labeled Progress -->
	 <div class="progress labeled" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
			 <div style="width: 50%;">50%</div>
	 </div>

	 <!-- Colored Progress (using semantic color classes) -->
	 <div class="progress" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
			 <div class="success" style="width: 75%;"></div>
	 </div>

Live Example: Circular Progress Indicator

60%

HTML Structure: Circular Progress

A circular progress indicator uses an SVG to draw the circle and progress arc. The --progress-value CSS variable controls the fill percentage.

<div class="progress circular" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="--progress-value: 60;">
			 <svg viewBox="0 0 36 36">
					 <path class="track" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
					 <path class="indicator" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" style="--progress-circumference: 100;" />
			 </svg>
			 <span>60%</span>
	 </div>

Styling

The .progress class provides the base styling for both linear and circular progress bars. For linear bars, the inner <div>'s width is set via an inline style or JavaScript. For circular bars, SVG stroke-dasharray and stroke-dashoffset properties are used, controlled by CSS variables.

.progress: Base container for progress bars.
.progress.labeled: Adds styling for a text label inside the bar.
.progress.circular: Styles for circular progress indicators.
Semantic color classes (.success, .warning, .error) can be applied to the progress indicator for contextual feedback.

JavaScript Integration

To dynamically update progress, you will typically use JavaScript to change the width style property of the inner <div> for linear bars, or the --progress-value CSS variable for circular bars.

<script>
			 // Example for linear progress
			 const linearProgress = document.querySelector('.progress div');
			 linearProgress.style.width = '75%'; // Update dynamically

			 // Example for circular progress
			 const circularProgress = document.querySelector('.progress.circular');
			 circularProgress.style.setProperty('--progress-value', 85); // Update dynamically
	 </script>

Accessibility

Progress components are designed with accessibility in mind:

role="progressbar": Identifies the element as a progress bar to assistive technologies.
aria-valuenow: Indicates the current value of the progress bar.
aria-valuemin: Defines the minimum allowed value.
aria-valuemax: Defines the maximum allowed value.
For circular progress, the visible percentage text provides additional context.

Customization

Customize the appearance using Axiom01's CSS variables for colors, spacing, and typography. You can adjust the height of linear bars, the size of circular bars, and their colors to match your theme.