candy-progress

Collaborne

by SlashBunny

HTML

<base href="https://raw-dot-custom-elements.appspot.com/Collaborne/candy-progress/2.1.2/candy-progress/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="candy-progress.html">

<candy-progress class="red" speed="35" fill></candy-progress>
<candy-progress class="green" speed="70" loop></candy-progress>
<candy-progress class="orange" loop></candy-progress>
<candy-progress class="blue" progress="50"></candy-progress>

CSS

candy-progress {
  --candy-progress-width: 100%;
  --candy-progress-height: 20px;
}

candy-progress.red {
  --candy-progress-color: #AC0000;
  --candy-progress-secondary-color: #FF0000;
}

candy-progress.green {
  --candy-progress-color: #006500;
  --candy-progress-secondary-color: #1FD01F;
}

candy-progress.orange {
  --candy-progress-color: #F48300;
  --candy-progress-secondary-color: #FF8826;
}

candy-progress.blue {
  --candy-progress-color: blue;
  --candy-progress-secondary-color: white;
}