animate-loading-bar

animate-loading-bar copied to clipboard

Animate Loading Bar

1kb loading bar like Shopify, Github, JSFiddle... that works!
View Demo

Installation

1. Via npm

   npm install animate-loading
   

   Or yarn

   yarn add animate-loading
   

2. Import to your project

   import 'animate-loading/dist/main.css'
   import AnimateLoading from 'animate-loading'
   

3. Usage

   // Create an instance in your project
   const loading = new AnimateLoading()
   
   // Start loading
   loading.start()
   
   // Execute your async stuff
   await fetch('YOUR_API')
   
   // Finish loading
   loading.finish()
   

Available options

const loading = new AnimateLoading(target, options)

• target [HTMLElement]: where the loading bar shows up. (Default value: document.body)
• options [Object]: Loading options
  • options.overlay [HTMLElement]: Set a blur overlay to your node (if neccessary)
  • options.thickness [String]: the loading bar thickness (Default value: 3px)
  • options.color [String]: the loading bar background color (Default value: gray)
  • options.startDuration [Number]: The duration (in ms) from the start of your async stuff until it gets done (Default value: 1000)
  • options.finishDuration [Number]: The duration (in ms) left to finish loading (Default value: 300)

Methods

1. Start loading

   loading.start()
   

   Run this before starting your async stuff

2. Finish loading

   loading.finish(callback = () => {})
   

   Run this after your async stuff gets done.

   Optional callback can be pass to run after finishing the loading process.

Credit

Copyright (c) 2022 Leo Huynh @ https://leohuynh.dev