Bootstrap 5 Tutorial

Bootstrap 5 Tutorial

v5.3.0

Bootstrap 5 Tutorial

NextIntroduction
→

Progress Bars in Bootstrap 5

Progress Bars: Display the completion progress of a task or operation.

Basic Progress Bar

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

Progress Bar with Labels

Labeled Progress Bars
25%
50% Complete
Uploading: 75%
<!-- Progress bar with label -->
            <div class="progress" style="height: 30px;">
            <div class="progress-bar" style="width: 25%">
                25%
            </div>
            </div>

            <!-- With custom text -->
            <div class="progress" style="height: 30px;">
            <div class="progress-bar bg-success" style="width: 50%">
                50% Complete
            </div>
            </div>

            <!-- With padding in text -->
            <div class="progress" style="height: 30px;">
            <div class="progress-bar bg-info" style="width: 75%">
                <span class="px-2">Uploading: 75%</span>
            </div>
            </div>

Progress Bar Colors

Color Variations
<!-- Color variations -->
            <div class="progress">
            <div class="progress-bar bg-primary" style="width: 10%"></div>
            </div>

            <div class="progress">
            <div class="progress-bar bg-success" style="width: 30%"></div>
            </div>

            <div class="progress">
            <div class="progress-bar bg-danger" style="width: 40%"></div>
            </div>

            <div class="progress">
            <div class="progress-bar bg-warning" style="width: 50%"></div>
            </div>

            <div class="progress">
            <div class="progress-bar bg-info" style="width: 60%"></div>
            </div>

Striped Progress Bars

Striped
progress-bar-striped
Animated Stripes
progress-bar-animated

Multiple Progress Bars

Stacked Progress Bars
Success
Warning
Danger
25%
15%
20%
10%
Total: 70% Complete
<!-- Multiple progress bars -->
            <div class="progress">
            <div class="progress-bar bg-success" style="width: 15%">Success</div>
            <div class="progress-bar bg-warning" style="width: 30%">Warning</div>
            <div class="progress-bar bg-danger" style="width: 20%">Danger</div>
            </div>

            <!-- With labels -->
            <div class="progress" style="height: 30px;">
            <div class="progress-bar bg-primary" style="width: 25%">25%</div>
            <div class="progress-bar bg-info" style="width: 15%">15%</div>
            <div class="progress-bar bg-success" style="width: 20%">20%</div>
            </div>

Interactive Example

Dynamic Progress Bar
25%
Set Value%
// React/JavaScript code for interactive progress bar
            const [progress, setProgress] = useState(25);
            const [animated, setAnimated] = useState(false);

            const increaseProgress = () => {
            setProgress(prev => Math.min(prev + 10, 100));
            };

            const decreaseProgress = () => {
            setProgress(prev => Math.max(prev - 10, 0));
            };

            const startAnimation = () => {
            setAnimated(true);
            setTimeout(() => setAnimated(false), 3000);
            };

            // HTML Structure
            <div class="progress" style="height: 30px;">
            <div class="progress-bar"
                style="width: {progress}%">
                {progress}%
            </div>
            </div>

            <button onclick="decreaseProgress()">Decrease</button>
            <button onclick="increaseProgress()">Increase</button>

Progress Bar Sizes

Small
style="height: 5px"
Default
Default height
Large
style="height: 40px"

Real-World Examples

Practical Use Cases
File Upload Progress
document.pdf65%
Uploading...2.1 MB / 3.2 MB
Skill Proficiency
JavaScript90%
HTML/CSS85%
React75%
Project Completion
Website Redesign
In Progress
Design
Development
Testing
Overall: 60%Due: 15 days
Storage Usage
Storage Used7.8 GB / 10 GB
⚠️ 78% used2.2 GB remaining

Accessibility Features

Accessibility Best Practices
  • Always include role="progressbar"
  • Use aria-valuenow, aria-valuemin, aria-valuemax
  • Add aria-label or aria-labelledby if no visible label
  • Ensure proper color contrast
  • Update ARIA attributes dynamically when value changes
  • Provide additional context for screen readers

JavaScript Integration

JavaScript API Examples
// JavaScript for dynamic progress bars

            // Update progress bar value
            function updateProgress(progressId, value) {
            const progressBar = document.getElementById(progressId);
            progressBar.style.width = value + '%';
            progressBar.setAttribute('aria-valuenow', value);
            progressBar.textContent = value + '%';
            }

            // Animate progress bar
            function animateProgress(progressId, targetValue, duration = 1000) {
            const progressBar = document.getElementById(progressId);
            const startValue = parseInt(progressBar.getAttribute('aria-valuenow') || 0);
            const startTime = performance.now();
            
            function update(currentTime) {
                const elapsed = currentTime - startTime;
                const progress = Math.min(elapsed / duration, 1);
                const currentValue = startValue + (targetValue - startValue) * progress;
                
                updateProgress(progressId, Math.round(currentValue));
                
                if (progress < 1) {
                requestAnimationFrame(update);
                }
            }
            
            requestAnimationFrame(update);
            }

            // Add striped animation
            function addStripedAnimation(progressId) {
            const progressBar = document.getElementById(progressId);
            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
            }

            // Remove animation
            function removeAnimation(progressId) {
            const progressBar = document.getElementById(progressId);
            progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
            }

            // Example usage
            document.addEventListener('DOMContentLoaded', function() {
            // Initialize progress bars
            updateProgress('uploadProgress', 25);
            
            // Animate to 100% over 2 seconds
            setTimeout(() => {
                animateProgress('uploadProgress', 100, 2000);
            }, 1000);
            });

Custom Styling

Custom Gradient
Custom Stripes
/* Custom CSS for progress bars */

            .custom-progress {
            height: 25px;
            border-radius: 12px;
            overflow: hidden;
            }

            .custom-progress-bar {
            background: linear-gradient(45deg, #ff6b6b, #ff8e53);
            transition: width 0.5s ease;
            }

            .gradient-progress {
            background: linear-gradient(90deg, #4776E6, #8E54E9);
            }

            .striped-custom {
            background-image: linear-gradient(
                45deg,
                rgba(255, 255, 255, 0.15) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, 0.15) 50%,
                rgba(255, 255, 255, 0.15) 75%,
                transparent 75%,
                transparent
            );
            background-size: 1rem 1rem;
            }
NextIntroduction
→
Logo

HiFi Toolkit is a free online platform offering essential tools and converters for developers, designers, and everyday productivity tasks.

Follow Us

Our Tools
Our Company
Special Tools

© 2026 HiFi Toolkit. All rights reserved.

Terms & ConditionsPrivacy Policy