@olenbetong/progress-bar

Styled and themed progress bar component for react.

Usage no npm install needed!

<script type="module">
  import olenbetongProgressBar from 'https://cdn.skypack.dev/@olenbetong/progress-bar';
</script>

README

@olenbetong/progress-bar

Basic styled progress bar.

Installation

NPM:

npm i @olenbetong/progress-bar

import { ProgressBar } from '@olenbetong/progress-bar';

UMD and ESM builds are available on unpkg.com. For UMD, the components are available in the global ReactProgress variable.

<script src="https://unpkg.com/@olenbetong/progress-bar@latest/dist/umd/progress.min.js" type="text/javascript"></script>
<script type="text/javascript">
const { ProgressBar } = ReactProgress;
</script>

<script type="module">
import { ProgressBar } from "https://unpkg.com/@olenbetong/progress-bar@latest/dist/esm/progress.min.js";
</script>

Usage

Pass value and optionally maxValue (default 100) and minValue (default 0) to the component.

function renderProgressBar() {
    return <ProgressBar value={50} maxValue={150} minValue={25}/>;
}