Name Last Update
..
demo Loading commit data...
test Loading commit data...
.bower.json Loading commit data...
.gitignore Loading commit data...
README.md Loading commit data...
bower.json Loading commit data...
hero.svg Loading commit data...
index.html Loading commit data...
paper-progress.html Loading commit data...

README.md

paper-progress

The progress bars are for situations where the percentage completed can be determined. They give users a quick sense of how much longer an operation will take.

Example:

<paper-progress value="10"></paper-progress>

There is also a secondary progress which is useful for displaying intermediate progress, such as the buffer level during a streaming playback progress bar.

Example:

<paper-progress value="10" secondary-progress="30"></paper-progress>

Styling progress bar:

To change the active progress bar color:

paper-progress {
  --paper-progress-active-color: #e91e63;
}

To change the secondary progress bar color:

paper-progress {
  --paper-progress-secondary-color: #f8bbd0;
}

To change the progress bar background color:

paper-progress {
  --paper-progress-container-color: #64ffda;
}

Add the class transiting to a <paper-progress> to animate the progress bar when the value changed. You can also customize the transition:

paper-progress {
  --paper-progress-transition-duration: 0.08s;
  --paper-progress-transition-timing-function: ease;
  --paper-progress-transition-transition-delay: 0s;
}

The following mixins are available for styling:

Custom property Description Default
--paper-progress-container-color Mixin applied to container --google-grey-300
--paper-progress-transition-duration Duration of the transition 0.008s
--paper-progress-transition-timing-function The timing function for the transition ease
--paper-progress-transition-delay delay for the transition 0s
--paper-progress-active-color The color of the active bar --google-green-500
--paper-progress-secondary-color The color of the secondary bar --google-green-100
--paper-progress-disabled-active-color The color of the active bar if disabled --google-grey-500
--paper-progress-disabled-secondary-color The color of the secondary bar if disabled --google-grey-300
--paper-progress-height The height of the progress bar 4px