Progress Bars

Loading…

Progress Bars | 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>

Source Code

More Utilities snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery