@polymer/paper-linear-progress

A material design progress bar

Usage no npm install needed!

<script type="module">
  import polymerPaperLinearProgress from 'https://cdn.skypack.dev/@polymer/paper-linear-progress';
</script>

README

Build status

Demo and API docs

<paper-progress>

Material design: Progress & activity

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