paper-progress

PolymerElements

by SlashBunny

HTML

<base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/paper-progress/v2.0.1/paper-progress/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="paper-progress.html">
<style is="custom-style">
  paper-progress {
    display: block;
    width: 100%;
    margin: 20px 0;
  }
  paper-progress.slow {
    --paper-progress-indeterminate-cycle-duration: 5s;
  }
  paper-progress.blue {
    --paper-progress-active-color: var(--paper-light-blue-500);
    --paper-progress-secondary-color: var(--paper-light-blue-100);
  }
  paper-progress.red {
    --paper-progress-active-color: var(--paper-red-500);
    --paper-progress-secondary-color: var(--paper-red-100);
  }
</style>
<paper-progress indeterminate class="blue"></paper-progress>
<paper-progress value="25" class="slow red" secondary-progress="50"></paper-progress>
<paper-progress value="40" secondary-progress="80"></paper-progress>