beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Progress bar demos

Browse source
This commit is contained in:
Angelos Chalaris 2016-09-19 12:30:38 +03:00
parent b6aebad6a7
commit dc39b0e80a
1 changed files with 32 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
docs/modules.html
View file

@ -567,6 +567,36 @@
&lt;div&gt;This is the final collapse of the accordion.&lt;/div&gt;</pre> &lt;div&gt;This is the final collapse of the accordion.&lt;/div&gt;</pre>
</div><br> </div><br>
<h2 id="progress">Progress bars</h2>
<p>The progress bar module is very easy to use and extend. Simply create a <code>&lt;div&gt;</code> with the <code>.prg</code> class and inside it add a <code>&lt;span&gt;</code> element with the desired <code>style=&quot;width:XX%&quot;</code> and you have a progress bar. Add text inside the <code>&lt;span&gt;</code> element if you want. You can use the <code>.green</code> or <code>.red</code> variants for the <code>&lt;span&gt;</code> element if you want to use different colors. Finally, you can always stack multiple progress bars, by simply adding more <code>&lt;span&gt;</code> elements, just make sure their widths add up to 100% or less.</p>
<h3>Default progress bar style</h3>
<div class="panel" ><h4 class="head">Example</h4><br>
<div class="prg" style="margin-left: 10px; margin-right: 10px; padding:0;"><span style="width:60%;">60%</span></div><br>
<pre class="panelcode">&lt;div class=&quot;prg&quot;&gt;&lt;span style=&quot;width:60%;&quot;&gt;60%&lt;/span&gt;&lt;/div&gt;</pre>
</div>
<h3>Progress bar variant styles</h3>
<div class="panel" ><h4 class="head">Example</h4><br>
<div class="prg" style="margin-left: 10px; margin-right: 10px; padding:0;"><span class="green" style="width:40%;"></span></div><br>
<div class="prg" style="margin-left: 10px; margin-right: 10px; padding:0;"><span class="red" style="width:70%;"></span></div><br>
<pre class="panelcode">&lt;div class=&quot;prg&quot;&gt;&lt;span class=&quot;green&quot; style=&quot;width:40%;&quot;&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;prg&quot;&gt;&lt;span class=&quot;red&quot; style=&quot;width:70%;&quot;&gt;&lt;/span&gt;&lt;/div&gt;</pre>
</div>
<h3>Stacked progress bars</h3>
<div class="panel" ><h4 class="head">Example</h4><br>
<div class="prg" style="margin-left: 10px; margin-right: 10px; padding:0;">
<span class="red" style="width:30%;"></span>
<span class="green" style="width:20%;"></span>
<span style="width:40%;"></span>
</div><br>
<pre class="panelcode">&lt;div class=&quot;prg&quot;&gt;
&lt;span class=&quot;red&quot; style=&quot;width:30%;&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;green&quot; style=&quot;width:20%;&quot;&gt;&lt;/span&gt;
&lt;span style=&quot;width:40%;&quot;&gt;&lt;/span&gt;
&lt;/div&gt;</pre>
</div><br>
</div> </div>
</div> </div>