Add progress bar

This commit is contained in:
Lucas 2020-09-30 10:28:06 +07:00
parent fffb32dd7c
commit c74bb0eabe
11 changed files with 273 additions and 28 deletions

View file

@ -77,6 +77,7 @@
<li><a href="#accordions" class="secondary">Accordions</a></li>
<li><a href="#cards" class="secondary">Cards</a></li>
<li><a href="#navs" class="secondary">Navs</a></li>
<li><a href="#progress" class="secondary">Progress</a></li>
<li><a href="#tooltips" class="secondary">Tooltips</a></li>
</ul>
</details>
@ -1074,6 +1075,22 @@
</article>
</section><!-- ./ Docs: Nav -->
<!-- Docs: Progress -->
<section id="progress">
<hgroup>
<h2>Progress</h2>
<h3>Progress bar element in pure HTML, without JavaScript.</h3>
</hgroup>
<article aria-label="Tooltips examples">
<progress value="25" max="100"></progress>
<progress indeterminate="true"></progress>
<pre><code>&lt;<b>progress</b> <i>value</i>=<u>"25</u></i>" <i>max</i>=<u>"100"</u>&gt;&lt;/<b>progress</b>&gt;
&lt;<b>progress</b> <i>indeterminate</i>=<u>"true"</u>&gt;&lt;/<b>progress</b>&gt;</code></pre>
</article>
</section><!-- ./ Docs: Progress -->
<!-- Docs: Tooltips -->
<section id="tooltips">
<hgroup>
@ -1090,7 +1107,7 @@
&lt;<b>p</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;Tooltip on a button&lt;/<b>button</b>&gt;&lt;/<b>p</b>&gt;</code></pre>
</article>
</section><!-- ./ Docs: Nav -->
</section><!-- ./ Docs: Tooltips -->
<!-- Love -->
<section id="love">