strc-progress-bar
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.4 • Public • Published

    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

    • 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

    Install

    npm i strc-progress-bar

    DownloadsWeekly Downloads

    28

    Version

    4.0.4

    License

    MIT

    Unpacked Size

    297 kB

    Total Files

    41

    Last publish

    Collaborators

    • symmetronic