Slim Progressbar Component With LitElement – monkey-bar

Category: Javascript , Loading | December 2, 2019
Author: stefanfrede
Views Total: 30
Official Page: Go to website
Last Update: December 2, 2019
License: MIT

Preview:

Slim Progressbar Component With LitElement – monkey-bar

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>

You Might Be Interested In:


Leave a Reply