loading-progress-bar

v2.0.4

Published

3 years ago

The universal, framework-agnostic loading progress bar component

Downloads

0High
0Medium
0Low

sumbad

web component progress bar

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Installation

Usage

Without bundling

With ReactJS

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

API

Options