https://github.com/rascal-coder/vue-loading
vue-loading
https://github.com/rascal-coder/vue-loading
Last synced: about 23 hours ago
JSON representation
vue-loading
- Host: GitHub
- URL: https://github.com/rascal-coder/vue-loading
- Owner: Rascal-Coder
- License: mit
- Created: 2024-01-05T08:38:24.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-09T04:21:59.000Z (about 2 years ago)
- Last Synced: 2025-10-03T06:08:13.892Z (4 months ago)
- Language: Vue
- Homepage: https://rascal-coder.github.io/vue-loading/
- Size: 1.84 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Vue Loading Overlay Component
Vue.js component for full screen loading indicator
Original author [ankurk91](https://github.com/ankurk91/vue-loading-overlay/)
## [Demo](https://rascal-coder.github.io/vue-loading/)
### Version matrix
| Vue.js version | Package version | Branch |
| :--- |:---------------:|-----------------------------------------------------------------:|
| 3.x | 6.x | `main` |
## Installation
```bash
npm install @rascoder/vue-loading
```
## Usage
#### As component
```html
Full page?
fetch Data
import Loading from '@rascoder/vue-loading';
import '@rascoder/vue-loading/dist/css/index.css';
export default {
data() {
return {
isLoading: false,
fullPage: true
}
},
components: {
Loading
},
methods: {
doAjax() {
this.isLoading = true;
// simulate AJAX
setTimeout(() => {
this.isLoading = false
}, 5000)
},
onCancel() {
console.log('User cancelled the loader.')
}
}
}
```
### As plugin
Initialise the plugin in your app
```js
import {createApp} from 'vue';
import {LoadingPlugin} from '@rascoder/vue-loading';
import '@rascoder/vue-loading/dist/css/index.css';
// Your app initialization logic goes here
const app = createApp({});
app.use(LoadingPlugin);
app.mount('#app');
```
Then use the plugin in your components
```html
Full page?
Login
export default {
data() {
return {
fullPage: false
}
},
methods: {
submit() {
let loader = this.$loading.show({
// Optional parameters
container: this.fullPage ? null : this.$refs.formContainer,
canCancel: true,
onCancel: this.onCancel,
});
// simulate AJAX
setTimeout(() => {
loader.hide()
}, 5000)
},
onCancel() {
console.log('User cancelled the loader.')
}
}
}
```
#### or same with Composition API
```html
import {ref, inject} from 'vue'
import {useLoading} from '@rascoder/vue-loading'
const $loading = useLoading({
// options
});
// or use inject without importing useLoading
// const $loading = inject('$loading')
const fullPage = ref(false)
const submit = () => {
const loader = $loading.show({
// Optional parameters
});
// simulate AJAX
setTimeout(() => {
loader.hide()
}, 5000)
}
```
## Available props
The component accepts these props:
| Attribute | Type | Default | Description |
| :--- | :---: | :---: | :--- |
| active | Boolean | `false` | Show loading by default when `true`, use it as `v-model:active` |
| can-cancel | Boolean | `false` | Allow user to cancel by pressing ESC or clicking outside |
| on-cancel | Function | `()=>{}` | Do something upon cancel, works in conjunction with `can-cancel` |
| is-full-page | Boolean | `true` | When `false`; limit loader to its container^ |
| transition | String | `fade` | Transition name |
| color | String | `#000` | Customize the color of loading icon |
| height | Number | * | Customize the height of loading icon |
| width | Number | * | Customize the width of loading icon |
| loader | String | `RotateSquare` | Name of icon shape you want use as loader, `["RotateSquare", "CubeShadow", "Grid","Stretch","Circle","LetterCube"] ` yada, more see [demo](https://rascal-coder.github.io/vue-loading/)|
| background-color | String | `#fff` | Customize the overlay background color |
| opacity | Number | `0.5` | Customize the overlay background opacity |
| z-index | Number | `9999` | Customize the overlay z-index |
| enforce-focus | Boolean | `true` | Force focus on loader |
| lock-scroll | Boolean | `false` | Freeze the scrolling during full screen loader |
* ^When `is-full-page` is set to `false`, the container element should be positioned as `position: relative`. You can
use CSS helper class `vl-parent`.
* *The default `height` and `width` values may vary based on the `loader` prop value
## Available slots
The component accepts these slots:
* `default` - Replace the animated icon with yours
* `before` - Place anything before the animated icon, you may need to style this.
* `after` - Place anything after the animated icon, you may need to style this.
## API methods
### `this.$loading.show(?propsData,?slots)`
```js
import {h} from 'vue';
let loader = this.$loading.show({
// Pass props by their camelCased names
container: this.$refs.loadingContainer,
canCancel: true, // default false
onCancel: this.yourCallbackMethod,
color: '#000000',
loader: 'spinner',
width: 64,
height: 64,
backgroundColor: '#ffffff',
opacity: 0.5,
zIndex: 999,
}, {
// Pass slots by their names
default: h('your-custom-loader-component-name'),
});
// hide loader whenever you want
loader.hide();
```
## Global configs
You can set props and slots for all future instances when using as plugin
```js
app.use(LoadingPlugin, {
// props
color: 'red'
}, {
// slots
})
```
Further you can override any prop or slot when creating new instances
```js
let loader = this.$loading.show({
color: 'blue'
}, {
// override slots
});
```
## Run examples on your localhost
* Clone this repo
* Make sure you have node-js `>=18.16` and [pnpm](https://pnpm.io/) `>=8.x` pre-installed
* Install dependencies `pnpm install`
* Run webpack dev server `npm start`
* This should open the demo page in your default web browser
## Testing
* This package is using [Jest](https://github.com/facebook/jest)
and [vue-test-utils](https://github.com/vuejs/test-utils) for testing.
* Execute tests with this command `npm test`
## License
[MIT](LICENSE.txt) License