Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/javadbat/jb-loading
loading web component
https://github.com/javadbat/jb-loading
Last synced: 7 days ago
JSON representation
loading web component
- Host: GitHub
- URL: https://github.com/javadbat/jb-loading
- Owner: javadbat
- License: mit
- Created: 2021-08-27T12:48:57.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-06-15T10:04:43.000Z (6 months ago)
- Last Synced: 2024-11-28T21:52:32.317Z (24 days ago)
- Language: JavaScript
- Size: 19.5 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# jb-loading
svg loading web component
by using this component you will get following benefits:
- you can set custom color by css variable.
- it will fit its container DOM so you can use it in any size you want
- light and smooth animation
Demo & Sample
in github:
## instructions
### install
#### using npm:
```cmd
npm i jb-loading
```
in one of your js in pages
```js
import 'jb-loading';
```
in your html or jsx
```html
```
#### using cdn:
```html
```
### set custom style
in some cases in your project you need to change defualt style of web-component for example you need to change color.
if you want to set a custom style to this web-component all you need is to set css variable in parent scope of web-component
| css variable name | description |
| ------------- | ------------- |
| --jb-loading-color | loading color default is black `#000` |
| --jb-loading-width | loading width default `100%` |
| --jb-loading-height | loading height default is `100%` |