From dc39b0e80a3753c0aad1844fe28c0bb94c700c3c Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Mon, 19 Sep 2016 12:30:38 +0300 Subject: [PATCH] Progress bar demos --- docs/modules.html | 34 ++++++++++++++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/docs/modules.html b/docs/modules.html index 8561b3b..8eed461 100644 --- a/docs/modules.html +++ b/docs/modules.html @@ -548,7 +548,7 @@

Accordion style

Example

-
+
This is the first collapse of the accordion.
@@ -566,7 +566,37 @@ <label for="acrd3">Third option</label> <div>This is the final collapse of the accordion.</div>

- + +

Progress bars

+

The progress bar module is very easy to use and extend. Simply create a <div> with the .prg class and inside it add a <span> element with the desired style="width:XX%" and you have a progress bar. Add text inside the <span> element if you want. You can use the .green or .red variants for the <span> element if you want to use different colors. Finally, you can always stack multiple progress bars, by simply adding more <span> elements, just make sure their widths add up to 100% or less.

+ +

Default progress bar style

+

Example


+
60%

+ 
<div class="prg"><span style="width:60%;">60%</span></div>
+
+ +

Progress bar variant styles

+

Example


+

+

+ 
<div class="prg"><span class="green" style="width:40%;"></span></div>
+<div class="prg"><span class="red" style="width:70%;"></span></div>
+
+ +

Stacked progress bars

+

Example


+
+ + + +

+ 
<div class="prg">
+  <span class="red" style="width:30%;"></span>
+  <span class="green" style="width:20%;"></span>
+  <span style="width:40%;"></span>
+</div>
+