Utilities Bootstrap 5Free
Free Bootstrap 5 utility snippet — Progress Bars. Preview, copy HTML, drop it into any Bootstrap 5 project.
1.9k views498 downloads
gosnippets.com/preview/progress-bars
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>More Utilities snippets
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
UtilitiesView →
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
UtilitiesView →
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
UtilitiesView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.