js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rework progress bars

Browse Source
This commit is contained in:
Cory LaViska
2017-08-17 11:30:47 -04:00
parent d0614fd5f0
commit 231863dea4
3 changed files with 169 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
docs/progress-bars.html
View File

@@ -49,30 +49,46 @@
<div id="content">
<h2 id="progress-bars">Progress Bars</h2>
<p>HTML5 introduced the <code>&lt;progress&gt;</code> element, but it’s not currently possible to style consistently in all browsers. As a result, Shoelace offers a custom alternative.</p>
<p>Create a progress bar with the following markup. Use the <code>progress-small</code> and <code>progress-big</code> modifiers to change the size. To set the state, use a <a href="utilities.html#sizing-utilities">sizing utility</a> or set the width explicitly on the <code>progress-bar</code> element.</p>
<p>Create a progress bar with the following markup. Use the <code>progress-[xs|sm|lg|xl]</code> modifiers to change the size. To set the state, use a <a href="utilities.html#sizing-utilities">sizing utility</a> or set the width explicitly on the <code>progress-bar</code> element.</p>
<p>An optional text label can be included inside the <code>progress-bar</code> element.</p>
<pre><code class="lang-html">&lt;div class=&quot;progress progress-small&quot;&gt;
&lt;div class=&quot;progress-bar w-25&quot;&gt;25%&lt;/div&gt;
<pre><code class="lang-html">&lt;div class=&quot;progress progress-xs&quot;&gt;
&lt;div class=&quot;progress-bar w-20&quot;&gt;20%&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress progress-sm&quot;&gt;
&lt;div class=&quot;progress-bar w-40&quot;&gt;40%&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress&quot;&gt;
&lt;div class=&quot;progress-bar w-50&quot;&gt;50%&lt;/div&gt;
&lt;div class=&quot;progress-bar w-60&quot;&gt;60%&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress progress-big&quot;&gt;
&lt;div class=&quot;progress-bar w-75&quot;&gt;75%&lt;/div&gt;
&lt;div class=&quot;progress progress-lg&quot;&gt;
&lt;div class=&quot;progress-bar w-70&quot;&gt;80%&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress progress-xl&quot;&gt;
&lt;div class=&quot;progress-bar w-100&quot;&gt;100%&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="progress progress-small">
<div class="progress-bar w-25">25%</div>
<div class="progress progress-xs">
<div class="progress-bar w-20">20%</div>
</div>
<div class="progress progress-sm">
<div class="progress-bar w-40">40%</div>
</div>
<div class="progress">
<div class="progress-bar w-50">50%</div>
<div class="progress-bar w-60">60%</div>
</div>
<div class="progress progress-big">
<div class="progress-bar w-75">75%</div>
<div class="progress progress-lg">
<div class="progress-bar w-70">80%</div>
</div>
<div class="progress progress-xl">
<div class="progress-bar w-100">100%</div>
</div>
<p>When progress can’t be determined, use the <code>progress-indeterminate</code> modifier to set an indeterminate state.</p>

195
source/css/progress-bars.css
View File

@@ -1,28 +1,22 @@
/*! Progress Bars */
:root {
--progress-font-size: var(--input-font-size);
--progress-font-size-small: var(--input-font-size-small);
--progress-font-size-big: var(--input-font-size-big);
--progress-height: var(--input-height);
--progress-height-small: var(--input-height-small);
--progress-height-big: var(--input-height-big);
--progress-height-xs: var(--input-height-xs);
--progress-height-sm: var(--input-height-sm);
--progress-height-lg: var(--input-height-lg);
--progress-height-xl: var(--input-height-xl);
--progress-font-size: var(--input-font-size);
--progress-font-size-xs: var(--input-font-size-xs);
--progress-font-size-sm: var(--input-font-size-sm);
--progress-font-size-lg: var(--input-font-size-lg);
--progress-font-size-xl: var(--input-font-size-xl);
--progress-color: var(--color-white);
--progress-bg-color: var(--component-bg-color);
--progress-bar-bg-color: var(--state-primary);
--progress-bar-color: var(--state-primary);
--progress-border-radius: var(--component-border-radius);
--progress-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
--progress-speed-change: .2s;
--progress-speed-indeterminate: 1.5s;
}
@keyframes progress-indeterminate {
0% {
left: -50%;
}
100% {
left: 100%;
}
--progress-speed: .2s;
--progress-speed-indeterminate: 3s;
}
.progress {
@@ -37,70 +31,111 @@
overflow: hidden;
margin-bottom: 1rem;
box-shadow: var(--progress-box-shadow);
& .progress-bar {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
text-align: center;
color: var(--progress-color);
background-color: var(--progress-bar-color);
transition: var(--progress-speed) width;
user-select: none;
cursor: default;
}
&.progress-indeterminate .progress-bar {
width: 75% !important;
animation: progress-indeterminate ease-in-out var(--progress-speed-indeterminate) infinite;
}
/* Sizes */
&.progress-xs {
font-size: var(--progress-font-size-xs);
height: var(--progress-height-xs);
line-height: var(--progress-height-xs);
}
&.progress-sm {
font-size: var(--progress-font-size-sm);
height: var(--progress-height-sm);
line-height: var(--progress-height-sm);
}
&.progress-lg {
font-size: var(--progress-font-size-lg);
height: var(--progress-height-lg);
line-height: var(--progress-height-lg);
}
&.progress-xl {
font-size: var(--progress-font-size-xl);
height: var(--progress-height-xl);
line-height: var(--progress-height-xl);
}
/* Variations */
&.progress-secondary {
& .progress-bar {
background-color: var(--state-secondary);
}
}
&.progress-success {
& .progress-bar {
background-color: var(--state-success);
}
}
&.progress-info {
& .progress-bar {
background-color: var(--state-info);
}
}
&.progress-warning {
& .progress-bar {
background-color: var(--state-warning);
}
}
&.progress-danger {
& .progress-bar {
background-color: var(--state-danger);
}
}
&.progress-light {
background-color: var(--state-dark);
& .progress-bar {
color: var(--state-dark);
background-color: var(--state-light);
}
}
&.progress-dark {
background-color: var(--state-light);
& .progress-bar {
color: var(--state-light);
background-color: var(--state-dark);
}
}
}
.progress-bar {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
text-align: center;
color: var(--progress-color);
background-color: var(--progress-bar-bg-color);
transition: var(--progress-speed-change) width;
user-select: none;
cursor: default;
}
@keyframes progress-indeterminate {
0% {
left: -65%;
}
.progress-small {
font-size: var(--progress-font-size-small);
height: var(--progress-height-small);
line-height: var(--progress-height-small);
}
50% {
left: 90%;
}
.progress-big {
font-size: var(--progress-font-size-big);
height: var(--progress-height-big);
line-height: var(--progress-height-big);
}
.progress-indeterminate .progress-bar {
width: 50% !important;
animation: progress-indeterminate linear var(--progress-speed-indeterminate) infinite;
}
/* Variations */
.progress-secondary .progress-bar {
background-color: var(--state-secondary);
}
.progress-success .progress-bar {
background-color: var(--state-success);
}
.progress-info .progress-bar {
background-color: var(--state-info);
}
.progress-warning .progress-bar {
background-color: var(--state-warning);
}
.progress-danger .progress-bar {
background-color: var(--state-danger);
}
.progress-light {
background-color: var(--state-dark);
}
.progress-light .progress-bar {
color: var(--state-dark);
background-color: var(--state-light);
}
.progress-dark .progress-bar {
color: var(--state-light);
background-color: var(--state-dark);
100% {
left: -65%;
}
}

38
source/docs/progress-bars.md
View File

@@ -8,34 +8,50 @@ description: These progress bars are easy to create and render consistently in a
HTML5 introduced the `<progress>` element, but it’s not currently possible to style consistently in all browsers. As a result, Shoelace offers a custom alternative.
Create a progress bar with the following markup. Use the `progress-small` and `progress-big` modifiers to change the size. To set the state, use a [sizing utility](utilities.html#sizing-utilities) or set the width explicitly on the `progress-bar` element.
Create a progress bar with the following markup. Use the `progress-[xs|sm|lg|xl]` modifiers to change the size. To set the state, use a [sizing utility](utilities.html#sizing-utilities) or set the width explicitly on the `progress-bar` element.
An optional text label can be included inside the `progress-bar` element.
```html
<div class="progress progress-small">
<div class="progress-bar w-25">25%</div>
<div class="progress progress-xs">
<div class="progress-bar w-20">20%</div>
</div>
<div class="progress progress-sm">
<div class="progress-bar w-40">40%</div>
</div>
<div class="progress">
<div class="progress-bar w-50">50%</div>
<div class="progress-bar w-60">60%</div>
</div>
<div class="progress progress-big">
<div class="progress-bar w-75">75%</div>
<div class="progress progress-lg">
<div class="progress-bar w-70">80%</div>
</div>
<div class="progress progress-xl">
<div class="progress-bar w-100">100%</div>
</div>
```
<div class="progress progress-small">
<div class="progress-bar w-25">25%</div>
<div class="progress progress-xs">
<div class="progress-bar w-20">20%</div>
</div>
<div class="progress progress-sm">
<div class="progress-bar w-40">40%</div>
</div>
<div class="progress">
<div class="progress-bar w-50">50%</div>
<div class="progress-bar w-60">60%</div>
</div>
<div class="progress progress-big">
<div class="progress-bar w-75">75%</div>
<div class="progress progress-lg">
<div class="progress-bar w-70">80%</div>
</div>
<div class="progress progress-xl">
<div class="progress-bar w-100">100%</div>
</div>
When progress can’t be determined, use the `progress-indeterminate` modifier to set an indeterminate state.