neon-progress

Collaborne

by SlashBunny

HTML

<base href="https://raw-dot-custom-elements.appspot.com/Collaborne/neon-progress/2.0.2/neon-progress/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="neon-progress.html">
<dom-bind>
  <template>
    <div class="input">
      Progress (between 0 and 1):
      <input value="{{value::input}}">
      <neon-progress value="[[value]]"></neon-progress>
    </div>
  </template>
</dom-bind>

CSS

.input {
  margin-top: 8px;
}


neon-progress {
  --neon-progress-color: #9C528B;
  --neon-progress-background: #E2C2C6;
}

JavaScript

const scope = document.querySelector("dom-bind");
scope.value = .5;