mirror of
https://github.com/jdan/98.css.git
synced 2025-08-17 19:26:37 +02:00
Merge pull request #170 from jdan/progress-indicator
Progress indicator (a.k.a. progress bar control)
This commit is contained in:
@@ -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>
|
||||
@@ -972,6 +972,35 @@
|
||||
</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>
|
||||
— 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>
|
||||
|
||||
<h2 id="issues-contributing-etc">Issues, Contributing, etc.</h2>
|
||||
|
||||
<p>
|
||||
|
32
style.css
32
style.css
@@ -891,3 +891,35 @@ table > tbody > tr > * {
|
||||
padding: 0 var(--grouped-element-spacing);
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.progress-indicator {
|
||||
height: 32px;
|
||||
position: relative;
|
||||
box-shadow: var(--border-sunken-inner);
|
||||
padding: 4px 4px;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
.progress-indicator > .progress-indicator-bar {
|
||||
height: 100%;
|
||||
display: block;
|
||||
background-color: var(--dialog-blue);
|
||||
}
|
||||
|
||||
.progress-indicator.segmented > .progress-indicator-bar {
|
||||
width: 100%;
|
||||
background-color: transparent; /* resets the background color which is set to blue in the non-segmented selector */
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
var(--dialog-blue) 0 16px,
|
||||
transparent 0 2px
|
||||
);
|
||||
background-repeat: repeat;
|
||||
background-size: 18px 100%;
|
||||
}
|
||||
|
Reference in New Issue
Block a user