→ 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

1.2k

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

Author:
Tane Mahuta

9 months ago

683

v.5.3
Default progress bar designs by boostrap css

Author:
Omar Khaled

8 months ago

1.4k

v.5.3
Progress bars
Progress bar variations

Author:
Reza Farhadi

8 months ago

488

v.5.3
Animated Skills Progress Chart

Author:
Reza Farhadi

8 months ago

1.9k

v.5.3
Animated Pricing Card with Bootstrap 5

Author:
Reza Farhadi

8 months ago

463

v.5.3
Credit Card Clone
On hover shows backside of credit card

Author:
Ankit khedkar

9 months ago

741

v.5.3
Search section with category filter

Author:
Mateo Rojas

4 months ago

2.1k

v.5.3
Contact Us Page with Google Maps and Form Validation
HTML: Form Fields: Includes fields for name, email, and message. Google Map: A div with an id of map where the Google Map will be displayed. Feedback Elements: <div> elements for displaying validation messages and success messages. CSS: Styling: Adds padding for the contact section, sets the map height, and styles feedback and success messages. JavaScript: Google Maps Initialization: Uses the Google Maps JavaScript API to create and display a map centered at specified coordinates. Replace YOUR_GOOGLE_MAPS_API_KEY with your actual API key. Form Validation: Validates the input fields and displays appropriate messages if the input is invalid or missing. How to Use: Replace API Key: Insert your Google Maps API key in the script tag for Google Maps. Customize Coordinates: Update the latitude and longitude in the initMap function to reflect your actual location. Validation Rules: Customize validation logic as needed for your form requirements.

Author:
zobaidul kaziex

8 months ago

4.9k

v.4.6
User avatar card

Author:
Anonymous

10 months ago

1.9k

v.5.3
Bootstrap 5 shopping cart design
clean and beautiful shopping cart component

Author:
Valeria González

5 months ago

2.2k

v.5.3
Stats card made with boostrap 4.6
Minimal admin stats card

Author:
Mishti

10 months ago

1.5k

v.4.6
User Profile Card with Bootstrap 5

Author:
Anonymous

2 months ago

1k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent