Package Exports

loading-progress-bar
loading-progress-bar/index.es.js
loading-progress-bar/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (loading-progress-bar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

loading-progress-bar

The universal, framework-agnostic loading progress bar component

Installation
Usage
API
Options

Installation

npm install loading-progress-bar --save

Or use one of the following content delivery networks:

unpkg.com CDN:

<script src="https://unpkg.com/loading-progress-bar"></script>

Skypack CDN:

<script src="https://cdn.skypack.dev/loading-progress-bar"></script>

Usage

Without bundling

Demo

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/loading-progress-bar"></script>
  </head>

  <body>
    <loading-progress-bar id="loadingProgressBar"></loading-progress-bar>

    <script>
      LoadingProgressBar.loadingProgressBar('loading-progress-bar');
      const loadingProgressBarEl = document.querySelector('#loadingProgressBar');
      setInterval(() => {
        loadingProgressBarEl.generateProgress.next();
      }, 3000);
    </script>
  </body>
</html>

With ReactJS

Demo

index.jsx

import React, { useRef, useEffect } from 'react';
import { loadingProgressBar } from 'loading-progress-bar';
import { elementToReact } from '@web-companions/react-adapter';

const LoadingProgressBarReact = loadingProgressBar('loading-progress-bar').adapter(elementToReact);

export default function Example() {
  const myRef = useRef(null);

  useEffect(() => {
    setInterval(() => {
      myRef.current.generateProgress.next();
    }, 3000);
  });

  return (
    <div>
      <LoadingProgressBarReact ref={myRef}></LoadingProgressBarReact>
    </div>
  );
}

With bundling (e.g. Webpack, Rollup, Snowpack and etc.)

index.js

import { loadingProgressBar } from 'loading-progress-bar';

loadingProgressBar('loading-progress-bar');

// next code depends on your project
const loadingProgressBarEl = document.createElement('loading-progress-bar');
document.body.append(loadingProgressBarEl);

API

generateProgress: Generator;
- To generate the next progress step.
togglePause: (isPause?: boolean) => void
- To pause and continue the process.

Options

Property	Attribute	Type	Default	Description
`color`	`color`	String	`#ef534e`	Sets the main color for Loading Progress Bar.
`config`	-	Object	`{duration: 2000, stepsCount: 1}`	duration - the animation duration. stepsCount - count steps from start to end the animation. Shows how many times need to invoke the function `generateProgress.next` to end the animation.