→ Anonymous
→ Progress bars made with bootstrap 5.3

Progress bars made with bootstrap 5.3

This bootstrap css example is contributed by Anonymous, on 27-Oct-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Progress Bar

Author Anonymous

700

v.5.3

Fork Fullscreen

<div class="container">
    <div class="card">
        <div class="card-body">
            <h3 class="mb-4">Project Progress Tracking</h3>

<div class="progress-label">Development Progress</div>
            <div class="progress">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 85%;" aria-valuenow="85"
                    aria-valuemin="0" aria-valuemax="100">
                    <span class="progress-value">85%</span>
                </div>
            </div>

<div class="progress-label">Testing Phase</div>
            <div class="progress">
                <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 65%;"
                    aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
                    <span class="progress-value">65%</span>
                </div>
            </div>

<div class="progress-label">Deployment Status</div>
            <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar"
                    style="width: 45%;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
                    <span class="progress-value">45%</span>
                </div>
            </div>

<div class="progress-label">Overall Completion</div>
            <div class="progress">
                <div class="progress-bar bg-warning" role="progressbar" style="width: 75%;" aria-valuenow="75"
                    aria-valuemin="0" aria-valuemax="100">
                    <span class="progress-value">75%</span>
                </div>
            </div>

<div class="progress-label">Task Distribution</div>
            <div class="progress">
                <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30"
                    aria-valuemin="0" aria-valuemax="100">
                    <span class="progress-value">30%</span>
                </div>
                <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20"
                    aria-valuemin="0" aria-valuemax="100">
                    <span class="progress-value">20%</span>
                </div>
                <div class="progress-bar bg-warning" role="progressbar" style="width: 15%" aria-valuenow="15"
                    aria-valuemin="0" aria-valuemax="100">
                    <span class="progress-value">15%</span>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

Progress bars
Progress bar variations

Author:
Reza Farhadi

6 months ago

331

v.5.3
Animated Skills Progress Chart

Author:
Reza Farhadi

5 months ago

1.1k

v.5.3
Progress bars

Author:
Tane Mahuta

7 months ago

397

v.5.3
Default progress bar designs by boostrap css

Author:
Omar Khaled

6 months ago

1.2k

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

7 months ago

3.3k

v.5.3
Interactive Shop Catalog Layout
shopping interface with wishlist functionality and dynamic filtering

Author:
Mason Ashford

3 months ago

1.4k

v.5.3
Boostrap Buttons
Basic Buttons - Standard button styles with different color variations Outline Buttons - Ghost buttons with colored borders that fill on hover Button Sizes - Three different size variations for different contexts Icon Buttons - Buttons with Bootstrap Icons integration Block Buttons - Full-width buttons using Bootstrap's grid system Button Groups - Grouped buttons for related actions Loading Buttons - Interactive buttons with loading spinners

Author:
Asmath

2 months ago

409

v.5.3
Minimal shopping cart

Author:
Valeria González

3 months ago

472

v.5.3
Hero section with an image

Author:
Ankit khedkar

5 months ago

2.2k

v.5.3
Modern Dashboard Analytics Card
A sleek, modern dashboard component featuring animated metric cards with progress indicators and trend badges. Perfect for displaying key business metrics like revenue, users, and orders with visual progress tracking.

Author:
Alaric Sloane

4 months ago

564

v.5.3
Bento Grid with Bootstrap 5

Author:
Juan Martinez

7 months ago

2k

v.5.3
Simple toast messages example
Four different types of toasts: Success (green) Error (red) Warning (yellow) Info (blue) Auto-dismisses after 3 seconds

Author:
Ankit khedkar

2 months ago

321

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent