Lightweight TypeScript loading bar like Shopify, Github, JSFiddle... that works!
- π Lightweight: ~3kB gzipped bundle size
- π¦ Zero Dependencies: Pure TypeScript/JavaScript
- π¨ Customizable: Colors, thickness, timing, overlay options
- π Type Safe: Full TypeScript support with exported types
- π― Modern: Uses CSS custom properties and modern APIs
- Via npm
npm install animate-loading
Or yarn
yarn add animate-loading
- Import to your project
import 'animate-loading/dist/main.css'
import AnimateLoading from 'animate-loading'
TypeScript:
import AnimateLoading, { AnimateLoadingOptions } from 'animate-loading'
import 'animate-loading/dist/main.css'
- 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()
TypeScript with full type safety:
import AnimateLoading, { AnimateLoadingOptions } from 'animate-loading'
const options: AnimateLoadingOptions = {
thickness: '4px',
color: '#3498db',
startDuration: 1200,
finishDuration: 400
}
const loading = new AnimateLoading(document.body, options)
loading.start()
await fetch('YOUR_API')
loading.finish(() => console.log('Done!'))
const loading = new AnimateLoading(target, options)
target
[HTMLElement]: where the loading bar shows up. (Default value:document.body
)options
[Object]: Loading optionsoptions.overlay
[HTMLElement]: Set a blur overlay to your node (if necessary)options.thickness
[String]: the loading bar thickness (Default value:3px
)options.color
[String]: the loading bar background color (Default value:gray
)options.overlayColor
[String]: the overlay background color (Default value:#ffffff
)options.overlayOpacity
[Number]: the overlay opacity when shown (Default value:0.6
)options.startDuration
[Number]: The duration (inms
) from the start of your async stuff until it gets done (Default value:1000
)options.finishDuration
[Number]: The duration (inms
) left to finish loading (Default value:300
)
- Start loading
loading.start()
Run this before starting your async stuff
- 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.
- Check loading state
if (loading.loading) {
console.log('Loading in progress...')
}
- Destroy instance
loading.destroy()
Call this when you no longer need the instance. Cleans up all timeouts and DOM classes.
const loading = new AnimateLoading(document.body, {
thickness: '4px',
color: '#3498db',
overlayColor: '#000000',
overlayOpacity: 0.8,
startDuration: 1500,
finishDuration: 500
})
// Safe usage with state checking
if (!loading.loading) {
loading.start()
try {
await someAsyncOperation()
loading.finish(() => console.log('Success!'))
} catch (error) {
loading.finish(() => console.error('Failed!'))
}
}
// Clean up when done
loading.destroy()
Copyright (c) 2022-present by Leo Huynh @ https://leohuynh.dev