Static progress bars are progress bars that do not animate when they are drawn in the DOM. This allows them to be used inside of Kendo UI data grids and other components that redraw themselves at set intervals.
Because IE/Edge offered no way to override the default animation of HTML5 progress elements, a new component had to be created. This component consists of a .progress-static
container with a .progress-meter
element inside of it.
The .progress-meter
component has to use a data-value
attribute instead of a value
attribute. Other than that it works exactly the same as the existing progress
bar component.
Existing progress bar HTML...
<div class="progress-static">
<div class="progress-meter" data-value="16"></div>
</div>
Static progress bar HTML...
<div class="progress demo">
<progress max="100" value="16" data-displayval="16%"></progress>
</div>
.progress-block
component was added to the progress-bar which allows the use of label
s and span
s to share horizontal space with the progress bar..progress-group
component was added to the progress-bar to enable content above and below a progress bar as well as allowing for stacked progress bars..progress-block
and .progress-group
can be combined and both work inside of cards.