Skip to the content.

Build Status GitHub License NPM Version Monthly Downloads

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.

CDN

<script type="module">
  import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/strc-progress-bar@4/loader/index.es2017.js';
  defineCustomElements();
</script>

React

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

applyPolyfills().then(() => {
  defineStrcProgressBar();
});
import { Components as StrcProgressBarComponents } from 'strc-progress-bar';

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

Vue

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();
});

Stencil

import 'strc-progress-bar/dist';

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