davejansen/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2026-05-05 06:01:22 +09:00
Code Issues Activity

Merge pull request #170 from jdan/progress-indicator

Browse Source 
Progress indicator (a.k.a. progress bar control)
This commit is contained in:
Juani Garay
2023-09-21 14:56:22 -03:00
committed by GitHub
parent ce17037475 2c2c08468b
commit ece2482d74
2 changed files with 62 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
docs/index.html.ejs
View File

@@ -43,6 +43,7 @@
<li><a href="#tree-view">TreeView</a></li>
<li><a href="#tabs">Tabs</a></li>
<li><a href="#table-view">TableView</a></li>
<li><a href="#progress-indicator">Progress Indicator</a></li>
</ul>
</li>
<li><a href="#issues-contributing-etc">Issues, Contributing, etc.</a></li>
@@ -882,7 +883,6 @@
</div>
</section>
<section class="component">
<h3 id="table-view">TableView</h3>
<div>
<p>
@@ -969,6 +969,35 @@
});
</script>
`) %>
</div>
</section>
<section class="component">
<h3 id="progress-indicator">Progress Indicator</h3>
<div>
<blockquote>
You can use a <em>progress indicator</em>, also known as a <em>progress bar control</em>, to show the percentage of completion of a lengthy operation.
<footer>
&mdash; Microsoft Windows User Experience p. 189
</footer>
</blockquote>
<p>
There are two types of progress bars: solid and segmented. The solid version is the default. To declare a segmented bar, you should use the <code>segmented</code> class.
</p>
<%- example(`
<div class="progress-indicator">
<span class="progress-indicator-bar" style="width: 40%;" />
</div>
`) %>
<%- example(`
<div class="progress-indicator segmented">
<span class="progress-indicator-bar" style="width: 40%;" />
</div>
`) %>
</div>
</section>