Simple Progress Bar
A simple progress bar.
Importing
This component is implemented as a custom element. Hence it can be imported in almost any setup you are using.
CDN
- Put the following script tag in the head of your HTML file:
<script type="module">
import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/strc-progress-bar@4/loader/index.es2017.js';
defineCustomElements();
</script>
- Then you can use the element anywhere in your app.
React
- Run
npm install strc-progress-bar --save
- Define custom element:
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:
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.
Vue
- Run
npm install strc-progress-bar --save
- Define custom element:
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.
Stencil
- Run
npm install strc-progress-bar --save
- Add an import to the npm package
import 'strc-progress-bar/dist';
- Then you can use the element anywhere in your Stencil app.
API
Updating progress
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).
<strc-progress-bar
progress='0.6'
fade-out='true'
/>
Styling
You can adjust the style of the progress bar using CSS variables.
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 dependenciesnpm start
: Build in development modenpm run build
: Build in production modenpm test
: Run testsnpm run test:watch
: Run tests in interactive watch mode