Can I use "Progress Bars" in commercial projects?

Yes. All GoSnippets are MIT licensed for personal and commercial use without attribution.

Does this snippet include Bootstrap?

This example targets Bootstrap 5. Copy the HTML/CSS/JS into your layout after loading Bootstrap CSS and JS from CDN or npm.

Progress Bars — Free Utilities Snippet (Bootstrap 5)

Loading…

Progress Bars — Free Utilities Snippet (Bootstrap 5) | GoSnippets

Source Code

1<div class="container py-4">
2  <!-- Basic labelled -->
3  <p class="fw-semibold small text-muted mb-1">HTML / CSS</p>
4  <div class="progress rounded-pill mb-4" style="height:10px;">
5    <div class="progress-bar" role="progressbar" style="width:90%; background:#1B3A6B;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
6  </div>
7
8  <p class="fw-semibold small text-muted mb-1">JavaScript</p>
9  <div class="progress rounded-pill mb-4" style="height:10px;">
10    <div class="progress-bar" role="progressbar" style="width:75%; background:#4A90D9;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
11  </div>
12
13  <p class="fw-semibold small text-muted mb-1">React</p>
14  <div class="progress rounded-pill mb-4" style="height:10px;">
15    <div class="progress-bar" role="progressbar" style="width:65%;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
16  </div>
17
18  <!-- Striped animated -->
19  <p class="fw-semibold small text-muted mb-1">Uploading… (animated)</p>
20  <div class="progress mb-4" style="height:22px; border-radius:8px;">
21    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success fw-semibold"
22      role="progressbar" style="width:45%;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
23      45%
24    </div>
25  </div>
26
27  <!-- Multi-segment -->
28  <p class="fw-semibold small text-muted mb-1">Storage usage (multi-segment)</p>
29  <div class="progress mb-2" style="height:18px; border-radius:8px;">
30    <div class="progress-bar bg-primary" style="width:35%;" title="Documents">Docs 35%</div>
31    <div class="progress-bar bg-info" style="width:20%;" title="Media">Media 20%</div>
32    <div class="progress-bar bg-warning" style="width:15%;" title="Other">Other 15%</div>
33  </div>
34</div>

Progress Bars

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Utilities snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection

Progress Bars

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Utilities snippets

Working in Tailwind? Explore our Tailwind gallery

Trending Bootstrap snippets

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection