→ 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

1.1k

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

Progress bars

Author:
Tane Mahuta

1 year ago

1.5k

v.5.3
Animated Skills Progress Chart

Author:
Reza Farhadi

1 year ago

4.2k

v.5.3
Progress bars made with bootstrap 5.3

Author:
Anonymous

1 year ago

2.5k

v.5.3
Default progress bar designs by boostrap css

Author:
Omar Khaled

1 year ago

2.3k

v.5.3
Accordion FAQ section
Minimal and with beautiful animation

Author:
Ankit khedkar

1 year ago

9.1k

v.5.3
contact us custom

Author:
java stories story

6 months ago

1.6k

v.5.3
Default progress bar designs by boostrap css

Author:
Omar Khaled

1 year ago

2.3k

v.5.3
Outlined Buttons with Animated Hover

Author:
Prajwal Hallale

1 year ago

2.1k

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

Author:
Ankit khedkar

1 year ago

1.6k

v.5.3
Minimal pricing cards

Author:
Sofia Petrova

1 year ago

1.4k

v.5.3
Profile Management Dashboard
profile management interface with personal information, security settings, and activity tracking in a modern design

Author:
Isaac Winslow

1 year ago

9.5k

v.5.3
Interactive Quiz Application
1. Dynamic Question Loading: Questions are loaded one at a time from a predefined set. 2. Timer: Each question has a 30-second time limit. Interactive Options: Users can select their answer, with visual feedback for correct and incorrect choices. 3. Progress Bar: Shows the user's progress through the quiz. 4. Results Summary: Displays the final score with a congratulatory or encouraging message. 5. Responsive Design: The quiz adapts to different screen sizes.

Author:
Ross Wille

1 year ago

9.6k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent