→ Reza Farhadi
→ Progress bars

Progress bars

Progress bar variations

This bootstrap css example is contributed by Reza Farhadi, on 29-Aug-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Progress Bar

Author Reza Farhadi

v.5.3

Fork Fullscreen

<h5>Basic Progress Bar</h5>
    <div class="progress mb-3">
        <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0"
            aria-valuemax="100">75%</div>
    </div>

<h5>Striped Progress Bar</h5>
    <div class="progress mb-3">
        <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 50%;" aria-valuenow="50"
            aria-valuemin="0" aria-valuemax="100">50%</div>
    </div>

<h5>Animated Striped Progress Bar</h5>
    <div class="progress mb-3">
        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 25%;"
            aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
    </div>

<h5>Multiple Progress Bars</h5>
    <div class="progress">
        <div class="progress-bar bg-success" role="progressbar" style="width: 30%;" aria-valuenow="30" aria-valuemin="0"
            aria-valuemax="100">30%</div>
        <div class="progress-bar bg-warning" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0"
            aria-valuemax="100">20%</div>
        <div class="progress-bar bg-danger" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0"
            aria-valuemax="100">10%</div>
    </div>

</div>

More Examples

Default progress bar designs by boostrap css

Author:
Omar Khaled

1 month ago

639

v.5.3
Progress bars

Author:
Tane Mahuta

2 months ago

143

v.5.3
Animated Skills Progress Chart

Author:
Reza Farhadi

2 weeks ago

71

v.5.3
Copy Code Section
Code block with working copy option

Author:
Kemaya m

2 months ago

158

v.5.3
Animated hero section

Author:
Anonymous

6 months ago

267

v.5.3
Outline button group

Author:
Mishti

5 months ago

150

v.5.3
404 page template

Author:
Valeria González

1 month ago

241

v.5.3
Author box
minimal author box with author image

Author:
Kemaya m

6 months ago

181

v.4.6
Search Bar Examples with Boostrap 5

Author:
Riz Mohammad

2 months ago

151

v.5.3
Responsive Bento Grid Layout
Bento grid layout using Bootstrap 5 and custom CSS

Author:
Anonymous

1 day ago

11

v.5.3
Mobile App Landing Page with Bootstrap 5

Author:
Ankit khedkar

1 day ago

14

v.5.3
HTML and Bootstrap for Registration Form
HTML: Personal Information Section: Includes fields for full name, email, date of birth, bio, and profile image. Company Information Section: Includes fields for company name, company size (using a dropdown), and location. Submit Button: A button to submit the form. CSS: Background Gradient: Applied to the body. Card Styling: Styled with rounded corners and padding. Button Styling: Custom colors for the submit button. Validation Styling: Highlight invalid fields and display error messages. JavaScript: Validation Logic: Checks if required fields are filled and updates the feedback area with error or success messages. Dynamic Feedback: Updates the form with success or error messages based on validation.

Author:
zobaidul kaziex

3 weeks ago

627

v.4.6

Didn't find component you were looking for?

Search from 150+ componenent