Skip to content

Commit 454ccf4

Browse files
mrholekmrholek
committed
docs: update documenatation
1 parent a431341 commit 454ccf4

File tree

1 file changed

+90
-0
lines changed

1 file changed

+90
-0
lines changed

‎docs/content/4.0/components/progress.md

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,96 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro
138138
</div>
139139
```
140140

141+
## Progress group
142+
143+
{{< example >}}
144+
<div class="progress-group mb-4">
145+
<div class="progress-group-prepend">
146+
<span class="text-medium-emphasis small">
147+
Title
148+
</span>
149+
</div>
150+
<div class="progress-group-bars">
151+
<div class="progress progress-xs">
152+
<div class="progress-bar bg-info" role="progressbar" style="width: 34%" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100"></div>
153+
</div>
154+
<div class="progress progress-xs">
155+
<div class="progress-bar bg-danger" role="progressbar" style="width: 78%" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"></div>
156+
</div>
157+
</div>
158+
</div>
159+
<div class="progress-group mb-4">
160+
<div class="progress-group-prepend">
161+
<span class="text-medium-emphasis small">
162+
Title
163+
</span>
164+
</div>
165+
<div class="progress-group-bars">
166+
<div class="progress progress-xs">
167+
<div class="progress-bar bg-info" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
168+
</div>
169+
<div class="progress progress-xs">
170+
<div class="progress-bar bg-danger" role="progressbar" style="width: 94%" aria-valuenow="94" aria-valuemin="0" aria-valuemax="100"></div>
171+
</div>
172+
<div class="progress progress-xs">
173+
<div class="progress-bar bg-success" role="progressbar" style="width: 67%" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100"></div>
174+
</div>
175+
</div>
176+
</div>
177+
<div class="progress-group mb-4">
178+
<div class="progress-group-prepend">
179+
<span class="text-medium-emphasis small">
180+
Title
181+
</span>
182+
</div>
183+
<div class="progress-group-bars">
184+
<div class="progress progress-xs">
185+
<div class="progress-bar bg-info" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
186+
</div>
187+
<div class="progress progress-xs">
188+
<div class="progress-bar bg-danger" role="progressbar" style="width: 94%" aria-valuenow="94" aria-valuemin="0" aria-valuemax="100"></div>
189+
</div>
190+
<div class="progress progress-xs">
191+
<div class="progress-bar bg-success" role="progressbar" style="width: 67%" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100"></div>
192+
</div>
193+
<div class="progress progress-xs">
194+
<div class="progress-bar bg-warning" role="progressbar" style="width: 17%" aria-valuenow="17" aria-valuemin="0" aria-valuemax="100"></div>
195+
</div>
196+
</div>
197+
</div>
198+
{{< /example >}}
199+
200+
{{< example >}}
201+
<div class="progress-group">
202+
<div class="progress-group-header">
203+
<i class="cil-user progress-group-icon me-2"></i>
204+
<div>Male</div>
205+
<div class="ms-auto font-weight-bold">43%</div>
206+
</div>
207+
<div class="progress-group-bars">
208+
<div class="progress progress-xs">
209+
<div class="progress-bar bg-warning" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
210+
</div>
211+
</div>
212+
</div>
213+
{{< /example >}}
214+
215+
{{< example >}}
216+
<div class="progress-group">
217+
<div class="progress-group-header align-items-end">
218+
<i class="cil-globe-alt progress-group-icon me-2"></i>
219+
<div>Organic Search</div>
220+
<div class="ms-auto font-weight-bold me-2">191.235</div>
221+
<div class="text-muted small">(56%)</div>
222+
</div>
223+
<div class="progress-group-bars">
224+
<div class="progress progress-xs">
225+
<div class="progress-bar bg-success" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
226+
</div>
227+
</div>
228+
</div>
229+
{{< /example >}}
230+
141231
## Customizing
142232

143233
### SASS

0 commit comments

Comments
 (0)