loading-progress-bar

The universal, framework-agnostic loading progress bar component

Usage no npm install needed!

<script type="module">
  import loadingProgressBar from 'https://cdn.skypack.dev/loading-progress-bar';
</script>

README

loading-progress-bar

Screenshot of the component
The universal, framework-agnostic loading progress bar component

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.