@vcnkit/progress

Progress indicators for VCNKit

Usage no npm install needed!

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

README

VCNKit/Progress

@vcnkit/progress provides a linear and a circular progress indicator. The indicators can be used in either determinate or indeterminate mode.

Installation

NPM

$ npm install --save @vcnkit/progress

Yarn

$ yarn add @vcnkit/progress

Usage

Circular progress indicator

The circular indicator can be used in either determinate mode by passing percentage-prop. This prop accepts any numeric between 0 and 100.

import { Circular } from '@vcnkit/progress';

const SomeComponent = () => (
    <Circular percentage={ 0 } />
);

Or, it can be used in indeterminate mode by omitting the percentage-prop.

import { Circular } from '@vcnkit/progress';

const SomeComponent = () => (
    <Circular />
);

Changing the size of the loader

The circular indicator accepts a width-prop.

import { Circular } from '@vcnkit/progress';

const SomeComponent = () => (
    <Circular width={ 32 } />
);

Linear progress indicator

The linear indicator accepts the same props as the Circular indicator except width, but will simply show a horizontal bar with a progress indicator.