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 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