@nodestrap/progress

A custom progress bar featuring support for stacked bars, animated backgrounds, text labels, and horizontal/vertical orientation.

Usage no npm install needed!

<script type="module">
  import nodestrapProgress from 'https://cdn.skypack.dev/@nodestrap/progress';
</script>

README

<Progress><Progress>

A custom progress bar featuring support for stacked bars, animated backgrounds, text labels, and horizontal/vertical orientation.

Preview

<Progress theme='primary' size='lg' gradient={true} outlined={true} >
    <ProgressBar min={0} max={100} value={30} progressBarStyle={['striped', 'running']} />
</Progress>

Rendered to:

<div class="c1 thPrimary szLg gradient outlined">
    // ...
</div>

Features

  • Includes all features in <Basic />.
  • stripped variant. Visualized in alternating background.
  • running variant. Visualized in animating background.
  • horizontal/vertical orientation.
  • Customizable via @cssfn/css-config.

Installation

Using npm:

npm i @nodestrap/progress

Support Us

If you feel our lib is useful for your projects,
please make a donation to avoid our project from extinction.

We always maintain our projects as long as we're still alive.

[Make a donation]