https://github.com/ehsan-shv/vb-loaders
Loader components for Vue3.
https://github.com/ehsan-shv/vb-loaders
css-animation nuxt3 vue3
Last synced: about 1 year ago
JSON representation
Loader components for Vue3.
- Host: GitHub
- URL: https://github.com/ehsan-shv/vb-loaders
- Owner: ehsan-shv
- Created: 2022-03-03T16:09:48.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-03-12T15:33:10.000Z (about 4 years ago)
- Last Synced: 2025-03-22T19:01:47.169Z (about 1 year ago)
- Topics: css-animation, nuxt3, vue3
- Language: Vue
- Homepage: https://ehsan-shv.github.io/vb-loader/
- Size: 1.04 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vb-loader
> Loader components for Vue3. [Demo](https://ehsan-shv.github.io/vb-loaders/)
## Components
- LoaderFacebook
- LoaderDualRing
- LoaderCircle
- LoaderRoller
- LoaderRing
- LoaderHeart
- LoaderGrid
- LoaderEllipsis
- LoaderDefault
- LoaderSpinner
- LoaderRipple
- LoaderHourglass
- LoaderContent
## Installation
```
npm i vb-loaders
```
## Example
```vue
import { defineComponent } from 'vue';
import { LoaderRoller } from 'vb-loaders';
export default defineComponent({
components: {
LoaderRoller,
},
});
```
## Content Loader Example
```vue
Hello World!
import { defineComponent, ref } from 'vue';
import { LoaderContent } from 'vb-loaders';
export default defineComponent({
components: {
LoaderContent,
},
setup() {
const loading = ref(true);
return { loading };
},
});
```
## CSS Variables for Customizing
```css
:root {
--vb-loader-circle-background-color: #ffffff;
--vb-loader-default-background-color: #ffffff;
--vb-loader-dual-ring-background-color: #ffffff;
--vb-loader-ellipsis-background-color: #ffffff;
--vb-loader-facebook-background-color: #ffffff;
--vb-loader-grid-background-color: #ffffff;
--vb-loader-heart-background-color: #ffffff;
--vb-loader-hourGlass-background-color: #ffffff;
--vb-loader-ring-background-color: #ffffff;
--vb-loader-ripple-background-color: #ffffff;
--vb-loader-roller-background-color: #ffffff;
--vb-loader-spinner-background-color: #ffffff;
--vb-loader-content-background-color: #212121;
--vb-loader-content-opacity: 0.6;
--vb-loader-content-z-index: 999;
--vb-loader-content-inner-loader-z-index: 1000;
--vb-loader-content-glass-blur: 15px;
--vb-loader-content-glass-background: rgba(255, 255, 255, 0.25);
}
```