Rewrite progress component without <progress> element
- <progress> element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary.
This commit is contained in:
Mark Otto
Mark Otto
parent
92fa9b2256
commit
a0141aa38e
|
|
@ -5,71 +5,139 @@ description: Documentation and examples for using Bootstrap progress bars.
|
|||
group: components
|
||||
---
|
||||
|
||||
Stylize [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) with a few extra classes and some crafty browser-specific CSS. Be sure to read up on the browser support.
|
||||
Use our custom progress component for displaying simple or complex progress bars. We don't use [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them.
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Example
|
||||
## How it works
|
||||
|
||||
To caption a progress bar, simply add a `<div>` with your caption text, [align the text using a utility class]({{ site.baseurl }}/utilities/typography/#text-alignment), and associate the caption with the `<progress>` element using the `aria-describedby` attribute.
|
||||
Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.
|
||||
|
||||
- We use the `.progress` as a wrapper to indicate the max value of the progress bar.
|
||||
- We use the inner `.progress-bar` to indicate the progress so far.
|
||||
- The `.progress-bar` requires an inline style or custom CSS to set their width.
|
||||
- The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible.
|
||||
|
||||
Put that all together, and you have the following examples.
|
||||
|
||||
{% example html %}
|
||||
|
||||
<div class="text-center" id="example-caption-1">Reticulating splines… 0%</div>
|
||||
<progress class="progress" value="0" max="100" aria-describedby="example-caption-1"></progress>
|
||||
|
||||
<div class="text-center" id="example-caption-2">Reticulating splines… 25%</div>
|
||||
<progress class="progress" value="25" max="100" aria-describedby="example-caption-2"></progress>
|
||||
|
||||
<div class="text-center" id="example-caption-3">Reticulating splines… 50%</div>
|
||||
<progress class="progress" value="50" max="100" aria-describedby="example-caption-3"></progress>
|
||||
|
||||
<div class="text-center" id="example-caption-4">Reticulating splines… 75%</div>
|
||||
<progress class="progress" value="75" max="100" aria-describedby="example-caption-4"></progress>
|
||||
|
||||
<div class="text-center" id="example-caption-5">Reticulating splines… 100%</div>
|
||||
<progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Contextual alternatives
|
||||
## Customizing
|
||||
|
||||
Progress bars use some of the same button and alert classes for consistent styles.
|
||||
Customize the appearance of your progress bars with custom CSS, background utilities, stripes, and more.
|
||||
|
||||
### Labels
|
||||
|
||||
Add labels to your progress bars by placing text within the `.progress-bar`.
|
||||
|
||||
{% example html %}
|
||||
<progress class="progress progress-success" value="25" max="100"></progress>
|
||||
<progress class="progress progress-info" value="50" max="100"></progress>
|
||||
<progress class="progress progress-warning" value="75" max="100"></progress>
|
||||
<progress class="progress progress-danger" value="100" max="100"></progress>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Height
|
||||
|
||||
We only set a `height` value on the `.progress-bar`, so if you change that value the outer `.progress` will automatically resize accordingly.
|
||||
|
||||
{% example html %}
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%; height: 1px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%; height: 20px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Backgrounds
|
||||
|
||||
Use background utility classes to change the appearance of individual progress bars.
|
||||
|
||||
{% example html %}
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Multiple bars
|
||||
|
||||
Include multiple progress bars in a progress component if you need.
|
||||
|
||||
{% example html %}
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Striped
|
||||
|
||||
Uses a gradient to create a striped effect.
|
||||
Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color.
|
||||
|
||||
{% example html %}
|
||||
<progress class="progress progress-striped" value="10" max="100"></progress>
|
||||
<progress class="progress progress-striped progress-success" value="25" max="100"></progress>
|
||||
<progress class="progress progress-striped progress-info" value="50" max="100"></progress>
|
||||
<progress class="progress progress-striped progress-warning" value="75" max="100"></progress>
|
||||
<progress class="progress progress-striped progress-danger" value="100" max="100"></progress>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar"style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" ></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Animated stripes
|
||||
|
||||
The striped gradient can also be animated. Add `.progress-animated` to `.progress` to animate the stripes right to left via CSS3 animations.
|
||||
The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations.
|
||||
|
||||
**Animated progress bars don't work in Opera 12**—as they don't support CSS3 animations. They also **don't work in IE10+ and Microsoft Edge** as those browsers currently don't support CSS3 animations on the [`::-ms-fill` pseudo-element](https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx).
|
||||
**Animated progress bars don't work in Opera 12**—as they don't support CSS3 animations.
|
||||
|
||||
<div class="bd-example">
|
||||
<progress class="progress progress-striped" value="25" max="100"></progress>
|
||||
<button type="button" class="btn btn-secondary bd-activate-animated-progressbar" data-toggle="button" aria-pressed="false" autocomplete="off">
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary bd-toggle-animated-progress" data-toggle="button" aria-pressed="false" autocomplete="off">
|
||||
Toggle animation
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<progress class="progress progress-striped progress-animated" value="25" max="100"></progress>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@
|
|||
@import "mixins/list-group";
|
||||
@import "mixins/nav-divider";
|
||||
@import "mixins/forms";
|
||||
@import "mixins/progress";
|
||||
@import "mixins/table-row";
|
||||
|
||||
// // Skins
|
||||
|
|
|
|||
|
|
@ -1,103 +1,32 @@
|
|||
//
|
||||
// Progress animations
|
||||
//
|
||||
|
||||
@keyframes progress-bar-stripes {
|
||||
from { background-position: $spacer-y 0; }
|
||||
from { background-position: $progress-height 0; }
|
||||
to { background-position: 0 0; }
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Basic progress bar
|
||||
//
|
||||
|
||||
.progress {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: $spacer-y; // todo: make a new var for this
|
||||
margin-bottom: $spacer-y;
|
||||
display: flex;
|
||||
overflow: hidden; // force rounded corners by cropping it
|
||||
}
|
||||
.progress[value] {
|
||||
// Set overall background
|
||||
font-size: $progress-font-size;
|
||||
line-height: $progress-height;
|
||||
text-align: center;
|
||||
background-color: $progress-bg;
|
||||
// Remove Firefox and Opera border
|
||||
border: 0;
|
||||
// Reset the default appearance
|
||||
appearance: none;
|
||||
// Set overall border radius
|
||||
@include border-radius($progress-border-radius);
|
||||
}
|
||||
|
||||
// Filled-in portion of the bar
|
||||
.progress[value]::-ms-fill {
|
||||
background-color: $progress-bar-color;
|
||||
// Remove right-hand border of value bar from IE10+/Edge
|
||||
border: 0;
|
||||
}
|
||||
.progress[value]::-moz-progress-bar {
|
||||
background-color: $progress-bar-color;
|
||||
}
|
||||
.progress[value]::-webkit-progress-value {
|
||||
background-color: $progress-bar-color;
|
||||
.progress-bar {
|
||||
height: $progress-height;
|
||||
color: $progress-bar-color;
|
||||
background-color: $progress-bar-bg;
|
||||
}
|
||||
|
||||
// Unfilled portion of the bar
|
||||
.progress[value]::-webkit-progress-bar {
|
||||
background-color: $progress-bg;
|
||||
@include box-shadow($progress-box-shadow);
|
||||
}
|
||||
base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only
|
||||
.progress[value] {
|
||||
background-color: $progress-bg;
|
||||
@include box-shadow($progress-box-shadow);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Striped
|
||||
//
|
||||
|
||||
.progress-striped[value]::-webkit-progress-value {
|
||||
.progress-bar-striped {
|
||||
@include gradient-striped();
|
||||
background-size: $spacer-y $spacer-y;
|
||||
}
|
||||
.progress-striped[value]::-moz-progress-bar {
|
||||
@include gradient-striped();
|
||||
background-size: $spacer-y $spacer-y;
|
||||
}
|
||||
.progress-striped[value]::-ms-fill {
|
||||
@include gradient-striped();
|
||||
background-size: $spacer-y $spacer-y;
|
||||
background-size: $progress-height $progress-height;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Animated
|
||||
//
|
||||
|
||||
.progress-animated[value]::-webkit-progress-value {
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
.progress-animated[value]::-moz-progress-bar {
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Variations
|
||||
//
|
||||
|
||||
.progress-success {
|
||||
@include progress-variant($progress-bar-success-bg);
|
||||
}
|
||||
.progress-info {
|
||||
@include progress-variant($progress-bar-info-bg);
|
||||
}
|
||||
.progress-warning {
|
||||
@include progress-variant($progress-bar-warning-bg);
|
||||
}
|
||||
.progress-danger {
|
||||
@include progress-variant($progress-bar-danger-bg);
|
||||
.progress-bar-animated {
|
||||
animation: progress-bar-stripes $progress-bar-animation-timing;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -852,17 +852,14 @@ $alert-danger-border: $state-danger-border !default;
|
|||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: $gray-lighter !default;
|
||||
$progress-bar-color: $brand-primary !default;
|
||||
$progress-border-radius: $border-radius !default;
|
||||
$progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default;
|
||||
|
||||
$progress-bar-bg: $brand-primary !default;
|
||||
$progress-bar-success-bg: $brand-success !default;
|
||||
$progress-bar-warning-bg: $brand-warning !default;
|
||||
$progress-bar-danger-bg: $brand-danger !default;
|
||||
$progress-bar-info-bg: $brand-info !default;
|
||||
|
||||
$progress-height: 1rem !default;
|
||||
$progress-font-size: .75rem !default;
|
||||
$progress-bg: $gray-lighter !default;
|
||||
$progress-border-radius: $border-radius !default;
|
||||
$progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default;
|
||||
$progress-bar-color: $white !default;
|
||||
$progress-bar-bg: $brand-primary !default;
|
||||
$progress-bar-animation-timing: 1s linear infinite !default;
|
||||
|
||||
// List group
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
// Progress bars
|
||||
|
||||
@mixin progress-variant($color) {
|
||||
&[value]::-webkit-progress-value {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
&[value]::-moz-progress-bar {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
// IE10+, Microsoft Edge
|
||||
&[value]::-ms-fill {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue