material-progress-html5-sass

Determinate progress bar

Use determinate mode for the progress bar when you want to show that a specific quantity of progress has occurred. For example, the percent remaining of a file being retrieved, the amount records in a batch written to database, or the percent remaining of a file that is uploaded. To indicate determinate progress, you must set the max value of the progress bar to max="100" (100 or 1000 or what you want) and set the amount of progress by setting a value="" (like value="80").

<progress max="100" value="0"></progress>

Indeterminate progress bar

Use indeterminate mode for the progress bar when you do not know how long an operation will take. Indeterminate mode is the default for progress bar and shows a cyclic animation without a specific amount of progress indicated. The following example shows an indeterminate progress bar:

<progress></progress>

Styled progress bar

There is the possibility of making your custom style for each progress bar. If you need to use an id to join with css and rewrite the values as in the demo, you may be interested:

progress {height: 10px; border-radius:5px) height or border-radius
progress::-webkit-progress-bar for the bar background
progress::-webkit-progress-value or progress:not([value]) for the line color (use background css attribute)

<style>
  progress#progress2 {height: 10px; border-radius:5px;box-shadow: 0 0 0 2px #ccc;}
  progress#progress2::-webkit-progress-bar {background-color: #ccc;}
  progress#progress2:not([value]) {background-color: #673AB7;}
</style>

<progress id="progressbar2"></progress>

#progress2

#progress3

#progress4

Some you want to know

In the sass stylesheet there are some variables that allow you to customize the default color, appearance, and size of the progress bar

//Colors
$progress-bar-color: #26a69a !default;
$progress-bar-background:#7c7876 !default;

//Sizes
$progress-height: 6px !default;
$progress-width: 100% !default;

//Apparence
$progress-border-radius: 1px !default;