rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

Rewrite progress component without <progress> element

Browse Source 
- <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 2016-12-29 14:56:28 -08:00 committed by Mark Otto
parent 92fa9b2256
commit a0141aa38e
5 changed files with 124 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
docs/components/progress.md
View File

@ -5,71 +5,139 @@ description: Documentation and examples for using Bootstrap progress bars.
group: components 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 ## Contents
* Will be replaced with the ToC, excluding the "Contents" header * Will be replaced with the ToC, excluding the "Contents" header
{:toc} {: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 %} {% example html %}
<div class="progress">
<div class="text-center" id="example-caption-1">Reticulating splines&hellip; 0%</div> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
<progress class="progress" value="0" max="100" aria-describedby="example-caption-1"></progress> </div>
<div class="progress">
<div class="text-center" id="example-caption-2">Reticulating splines&hellip; 25%</div> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
<progress class="progress" value="25" max="100" aria-describedby="example-caption-2"></progress> </div>
<div class="progress">
<div class="text-center" id="example-caption-3">Reticulating splines&hellip; 50%</div> <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
<progress class="progress" value="50" max="100" aria-describedby="example-caption-3"></progress> </div>
<div class="progress">
<div class="text-center" id="example-caption-4">Reticulating splines&hellip; 75%</div> <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
<progress class="progress" value="75" max="100" aria-describedby="example-caption-4"></progress> </div>
<div class="progress">
<div class="text-center" id="example-caption-5">Reticulating splines&hellip; 100%</div> <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
<progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress> </div>
{% endexample %} {% 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 %} {% example html %}
<progress class="progress progress-success" value="25" max="100"></progress> <div class="progress">
<progress class="progress progress-info" value="50" max="100"></progress> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
<progress class="progress progress-warning" value="75" max="100"></progress> </div>
<progress class="progress progress-danger" value="100" max="100"></progress> {% 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 %} {% endexample %}
### Striped ### 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 %} {% example html %}
<progress class="progress progress-striped" value="10" max="100"></progress> <div class="progress">
<progress class="progress progress-striped progress-success" value="25" max="100"></progress> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
<progress class="progress progress-striped progress-info" value="50" max="100"></progress> </div>
<progress class="progress progress-striped progress-warning" value="75" max="100"></progress> <div class="progress">
<progress class="progress progress-striped progress-danger" value="100" max="100"></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 %} {% endexample %}
### Animated stripes ### 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"> <div class="bd-example">
<progress class="progress progress-striped" value="25" max="100"></progress> <div class="progress">
<button type="button" class="btn btn-secondary bd-activate-animated-progressbar" data-toggle="button" aria-pressed="false" autocomplete="off"> <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 Toggle animation
</button> </button>
</div> </div>
{% highlight html %} {% 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 %} {% endhighlight %}

1
scss/_mixins.scss
View File

@ -43,7 +43,6 @@
@import "mixins/list-group"; @import "mixins/list-group";
@import "mixins/nav-divider"; @import "mixins/nav-divider";
@import "mixins/forms"; @import "mixins/forms";
@import "mixins/progress";
@import "mixins/table-row"; @import "mixins/table-row";
// // Skins // // Skins

97
scss/_progress.scss
View File

@ -1,103 +1,32 @@
//
// Progress animations // Progress animations
//
@keyframes progress-bar-stripes { @keyframes progress-bar-stripes {
from { background-position: $spacer-y 0; } from { background-position: $progress-height 0; }
to { background-position: 0 0; } to { background-position: 0 0; }
} }
//
// Basic progress bar // Basic progress bar
//
.progress { .progress {
display: block; display: flex;
width: 100%;
height: $spacer-y; // todo: make a new var for this
margin-bottom: $spacer-y;
overflow: hidden; // force rounded corners by cropping it overflow: hidden; // force rounded corners by cropping it
} font-size: $progress-font-size;
.progress[value] { line-height: $progress-height;
// Set overall background text-align: center;
background-color: $progress-bg; 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); @include border-radius($progress-border-radius);
} }
.progress-bar {
// Filled-in portion of the bar height: $progress-height;
.progress[value]::-ms-fill { color: $progress-bar-color;
background-color: $progress-bar-color; background-color: $progress-bar-bg;
// 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;
} }
// 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 // Striped
// .progress-bar-striped {
.progress-striped[value]::-webkit-progress-value {
@include gradient-striped(); @include gradient-striped();
background-size: $spacer-y $spacer-y; background-size: $progress-height $progress-height;
}
.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;
} }
//
// Animated // Animated
// .progress-bar-animated {
animation: progress-bar-stripes $progress-bar-animation-timing;
.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);
} }

11
scss/_variables.scss
View File

@ -852,17 +852,14 @@ $alert-danger-border: $state-danger-border !default;
// Progress bars // Progress bars
$progress-height: 1rem !default;
$progress-font-size: .75rem !default;
$progress-bg: $gray-lighter !default; $progress-bg: $gray-lighter !default;
$progress-bar-color: $brand-primary !default;
$progress-border-radius: $border-radius !default; $progress-border-radius: $border-radius !default;
$progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !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-bg: $brand-primary !default;
$progress-bar-success-bg: $brand-success !default; $progress-bar-animation-timing: 1s linear infinite !default;
$progress-bar-warning-bg: $brand-warning !default;
$progress-bar-danger-bg: $brand-danger !default;
$progress-bar-info-bg: $brand-info !default;
// List group // List group

16
scss/mixins/_progress.scss
View File

@ -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;
}
}