Simple Progress Bar

A simple progress bar.

!Progress Bar Component

Importing

This component is implemented as a custom element. Hence it can be imported in almost any setup you are using.

$3

- Put the following script tag in the head of your HTML file:

``html

`

- Then you can use the element anywhere in your app.

$3

- Run npm install strc-progress-bar --save
- Define custom element:

`javascript
import {
applyPolyfills,
defineCustomElements as defineStrcProgressBar,
} from 'strc-progress-bar/loader';

applyPolyfills().then(() => {
defineStrcProgressBar();
});
`

- If you use React with TypeScript, add types in the following way:

`typescript
import { Components as StrcProgressBarComponents } from 'strc-progress-bar';

declare global {
namespace JSX {
interface IntrinsicElements {
'strc-progress-bar': StrcProgressBarComponents.StrcProgressBar,
}
}
}
`

- Then you can use the element anywhere in your React app.

$3

- Run npm install strc-progress-bar --save
- Define custom element:

`javascript
import {
applyPolyfills,
defineCustomElements as defineStrcProgressBar,
} from 'strc-progress-bar/loader';

// Tell Vue to ignore all components defined in strc-progress-bar package
Vue.config.ignoredElements = [/strc-progress-bar\w*/];

// Bind custom elements to window object
applyPolyfills().then(() => {
defineStrcProgressBar();
});
`

- Then you can use the element anywhere in your Vue app.

$3

- Run npm install strc-progress-bar --save
- Add an import to the npm package

`typescript
import 'strc-progress-bar/dist';
`

- Then you can use the element anywhere in your Stencil app.

API

$3

Set the progress as a JSX or HTML attribute between 0 and 1. If the fade-out attribute is set to 'true', the progress bar will fade out when it is complete (i.e. the progress is larger than or equal to 1).

`html
progress='0.6'
fade-out='true'
/>
`

$3

You can adjust the style of the progress bar using CSS variables.

`css
strc-progress-bar {
/ Color of progress bar /
--strc-progress-bar-color: red;

/ Background color of progress bar /
--strc-progress-bar-background-color: gray;

/ Height of progress bar /
--strc-progress-bar-height: 3px;

/ Duration of animated progress transitions /
--strc-progress-bar-transition-duration: 0.2s;

/*
* Duration of fade out when progress is complete.
* Only takes effect, if the fade-out attribute is set to 'true'
*/
--strc-progress-bar-fade-out-duration: 0.75s;
}
`

NPM scripts

- npm install: Install dependencies
- npm start: Build in development mode
- npm run build: Build in production mode
- npm test: Run tests
- npm run test:watch`: Run tests in interactive watch mode