https://github.com/weaverse/animate-loading-bar
1kb loading bar like Shopify, Github, JSFiddle... that works!
https://github.com/weaverse/animate-loading-bar
animation-css github github-loading-bar jsfiddle-loading-bar loading-bar shopify-loading tiny
Last synced: 10 months ago
JSON representation
1kb loading bar like Shopify, Github, JSFiddle... that works!
- Host: GitHub
- URL: https://github.com/weaverse/animate-loading-bar
- Owner: Weaverse
- Created: 2017-11-23T16:26:50.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2023-09-30T14:46:50.000Z (over 2 years ago)
- Last Synced: 2025-03-09T17:44:58.550Z (11 months ago)
- Topics: animation-css, github, github-loading-bar, jsfiddle-loading-bar, loading-bar, shopify-loading, tiny
- Language: HTML
- Homepage: https://weaverse.github.io/animate-loading-bar/
- Size: 764 KB
- Stars: 26
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Installation
1. Via npm
```sh
npm install animate-loading
```
Or yarn
```sh
yarn add animate-loading
```
2. Import to your project
```js
import 'animate-loading/dist/main.css'
import AnimateLoading from 'animate-loading'
```
3. Usage
```js
// 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
```javascript
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
```javascript
loading.start()
```
Run this before starting your async stuff
2. Finish loading
```javascript
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](https://leohuynh.dev)
