Slim Progressbar Component With LitElement – monkey-bar

Preview:

Description:

monkey-bar is an easy, slim, animated progress bar web component built with LitElement.

How to use it:

1. Install the package.

# NPM
$ npm install monkey-bar --save

2. Import the monkey-bar.

<script type="module">
  import './monkey-bar.js';
<script>

// or
import 'monkey-bar'

3. Or directly load the compiled JavaScript file in the document.

<script src="monkey-bar.min.js"></script>

4. Insert the progress bar into your project.

<monkey-bar><monkey-bar>

5. Possible props to customize the progress bar.

• min: min value
• max: max value
• now: current value
• labeled: labeled progress bar
• striped: striped progress bar
• animated: animate the progress bar

<monkey-bar
  min="0"
  max="100"
  now="50"
  labeled 
  striped
  animated>
</monkey-bar>