weaverse / animate-loading-bar

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

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