Pure CSS Progress Bar Library with Custom Themes – progress-bar.css

Progress Bar Library is a lightweight, pure CSS solution that allows you to create customizable progress indicators in web applications.

It uses CSS custom properties for configuration and provides an optional JavaScript helper module for dynamic control.

Features:

• Pure CSS Architecture: The library renders progress bars using CSS pseudo-elements. No JavaScript is required for basic functionality.
• CSS Variable Configuration: All visual properties are controlled through CSS custom properties (--pb-progress, --pb-color, --pb-background).
• Built-in Themes: Three pre-configured themes (blue, green, dark) with gradient fills and contextual styling.
• Size Modifiers: Three size variants (small, default, large) with proportional border radius adjustments.
• Striped Pattern Modifier: Diagonal stripe overlay using CSS gradients.
• Responsive Design: Height and border radius scale proportionally with size modifiers.
• Optional JavaScript Helper: Separate module provides programmatic control with methods for setting progress, animating transitions, and simulating loading states.
• High Performance: Uses CSS transforms and transitions for smooth animations.

Use Cases:

• File Upload Interfaces: Track upload progress with real-time updates through the JavaScript setProgress() method.
• Multi-Step Forms: Display completion progress across form sections.
• Loading States: Simulate indeterminate loading with the simulateLoading() helper method.
• Dashboard Metrics: Visualize KPIs and completion percentages.

How To Use It:

1. Download and load the progress-bar.css stylesheet in the head section of your document.

<link rel="stylesheet" href="progress-bar.css">

2. Create a container for the progress bar and control its appearance and behavior with the following properties and classes:

• --pb-progress (percentage): Sets the fill width from 0% to 100%. This is the primary control for progress value.
• --pb-color (color): Defines the fill color. Defaults to #3498db if not specified. Can be overridden inline or through theme classes.
• --pb-background (color): Sets the track background color. Defaults to #f0f0f0. Provides contrast for the fill element.
• theme-blue: Uses blue gradient fill (#2196f3 to #1976d2) with light blue background (#e3f2fd).
• theme-green: Uses green gradient fill (#4caf50 to #2e7d32) with light green background (#e8f5e9). Includes subtle inset shadow for depth.
• theme-dark: Uses cyan gradient fill (#00bcd4 to #008ba3) on dark gray background (#2d2d2d). Features glow effect and border styling.
• size-small: 10px height with 5px border radius. Suitable for compact interfaces.
• size-large: 30px height with 15px border radius. Appropriate for prominent progress indicators.
• striped: Applies diagonal stripe pattern using CSS gradients. The pattern overlays the fill color using background-image. Works with all theme classes through proper CSS specificity.

<!-- Basic progress bar at 30% completion -->
<div class="progress-bar" style="--pb-progress: 30%;"></div>
<!-- Progress bar with dark theme at 50% -->
<div class="progress-bar theme-dark" style="--pb-progress: 50%;"></div>
<!-- Small-sized progress bar at 20% -->
<div class="progress-bar size-small" style="--pb-progress: 20%;"></div>
<!-- Progress bar with striped pattern at 60% -->
<div class="progress-bar striped" style="--pb-progress: 60%;"></div>
<!-- Combined modifiers: green theme, large size, striped pattern -->
<div class="progress-bar theme-green size-large striped" style="--pb-progress: 80%;"></div>

3. If you need to animate the bar or control it programmatically, include the helper script.

<script src="progress-bar.js"></script>

4. Manipulate the progress bars:

// Instantly sets the progress value of a specific element.
// Params: Selector (string) or Element, Value (0-100)
ProgressBar.setProgress('#my-progress', 75);
// Smoothly animates the bar from its current value to the target value.
// Params: Selector, Target Value, Duration (ms)
ProgressBar.animateTo('#my-progress', 100, 1500);
// Retrieves the current numeric value of the progress bar.
// Returns: Number
const currentVal = ProgressBar.getProgress('#my-progress');
console.log(currentVal); 
// Starts a fake loading animation (useful for demos or indeterminate states).
// Returns: Interval ID (can be used to stop the simulation)
ProgressBar.simulateLoading('#my-progress');

Alternatives:

• NProgress: A slim progress bar for Ajax applications.
• ProgressBar.js: SVG-based progress indicators with support for circular and path-based shapes.
• Pace: Automatic page load progress bar that requires zero configuration.
• 10 Best JavaScript & CSS Progress Bar Components