{"id":305176,"url":"https://github.com/ankurk91/vue-loading-overlay","last_synced_at":"2025-04-03T02:08:11.717Z","repository":{"id":40210260,"uuid":"115904576","full_name":"ankurk91/vue-loading-overlay","owner":"ankurk91","description":"Vue.js component for full screen loading indicator :cyclone:","archived":false,"fork":false,"pushed_at":"2024-09-05T05:52:14.000Z","size":1592,"stargazers_count":1241,"open_issues_count":3,"forks_count":101,"subscribers_count":11,"default_branch":"main","last_synced_at":"2024-10-29T20:45:35.153Z","etag":null,"topics":["indicator","loader","loading","overlay","spinner","vue"],"latest_commit_sha":null,"homepage":"https://ankurk91.github.io/vue-loading-overlay/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ankurk91.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-01T07:06:22.000Z","updated_at":"2024-10-28T10:16:52.000Z","dependencies_parsed_at":"2023-11-08T07:51:29.687Z","dependency_job_id":"371a050d-7d9b-4dcd-b809-a96c4af68f59","html_url":"https://github.com/ankurk91/vue-loading-overlay","commit_stats":{"total_commits":208,"total_committers":6,"mean_commits":"34.666666666666664","dds":0.04807692307692313,"last_synced_commit":"69014b82dd6476cb155d0a5f2b3aef75060aa0e1"},"previous_names":[],"tags_count":40,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankurk91%2Fvue-loading-overlay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankurk91%2Fvue-loading-overlay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankurk91%2Fvue-loading-overlay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankurk91%2Fvue-loading-overlay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ankurk91","download_url":"https://codeload.github.com/ankurk91/vue-loading-overlay/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244818626,"owners_count":20515510,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["indicator","loader","loading","overlay","spinner","vue"],"created_at":"2024-01-07T07:56:23.931Z","updated_at":"2025-03-27T01:08:39.206Z","avatar_url":"https://github.com/ankurk91.png","language":"JavaScript","funding_links":[],"categories":["Components \u0026 Libraries","JavaScript","UI Components","UI组件","UI Components [🔝](#readme)"],"sub_categories":["UI Components","Loader","装载机"],"readme":"# Vue Loading Overlay Component\n\n[![downloads](https://badgen.net/npm/dt/vue-loading-overlay)](https://npm-stat.com/charts.html?package=vue-loading-overlay\u0026from=2018-01-01)\n[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/vue-loading-overlay/badge?style=rounded)](https://www.jsdelivr.com/package/npm/vue-loading-overlay)\n[![npm-version](https://badgen.net/npm/v/vue-loading-overlay)](https://www.npmjs.com/package/vue-loading-overlay)\n[![github-tag](https://badgen.net/github/tag/ankurk91/vue-loading-overlay)](https://github.com/ankurk91/vue-loading-overlay/tags)\n[![build](https://github.com/ankurk91/vue-loading-overlay/workflows/build/badge.svg)](https://github.com/ankurk91/vue-loading-overlay/actions)\n[![license](https://badgen.net/github/license/ankurk91/vue-loading-overlay)](LICENSE.txt)\n![TypeScript](https://badgen.net/badge/icon/Typed?icon=typescript\u0026label\u0026labelColor=blue\u0026color=555555)\n\nVue.js component for full screen loading indicator\n\n## [Demo](https://ankurk91.github.io/vue-loading-overlay/) or [JSFiddle](https://jsfiddle.net/ankurk91/2ou37bc8/)\n\n### Version matrix\n\n| Vue.js version | Package version |                                                           Branch |\n| :---           |:---------------:|-----------------------------------------------------------------:| \n| 2.x            |       3.x       | [3.x](https://github.com/ankurk91/vue-loading-overlay/tree/v3.x) |\n| 3.x            |       6.x       |                                                           `main` |\n\n## Installation\n\n```bash\nnpm install vue-loading-overlay@^6.0 \n```\n\n## Usage\n\n#### As component\n\n```html\n\n\u003ctemplate\u003e\n    \u003cdiv class=\"vl-parent\"\u003e\n        \u003cloading v-model:active=\"isLoading\"\n                 :can-cancel=\"true\"\n                 :on-cancel=\"onCancel\"\n                 :is-full-page=\"fullPage\"/\u003e\n\n        \u003clabel\u003e\u003cinput type=\"checkbox\" v-model=\"fullPage\"\u003eFull page?\u003c/label\u003e\n        \u003cbutton @click.prevent=\"doAjax\"\u003efetch Data\u003c/button\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n    import Loading from 'vue-loading-overlay';\n    import 'vue-loading-overlay/dist/css/index.css';\n\n    export default {\n        data() {\n            return {\n                isLoading: false,\n                fullPage: true\n            }\n        },\n        components: {\n            Loading\n        },\n        methods: {\n            doAjax() {\n                this.isLoading = true;\n                // simulate AJAX\n                setTimeout(() =\u003e {\n                    this.isLoading = false\n                }, 5000)\n            },\n            onCancel() {\n                console.log('User cancelled the loader.')\n            }\n        }\n    }\n\u003c/script\u003e\n```\n\n### As plugin\n\nInitialise the plugin in your app\n\n```js\nimport {createApp} from 'vue';\nimport {LoadingPlugin} from 'vue-loading-overlay';\nimport 'vue-loading-overlay/dist/css/index.css';\n// Your app initialization logic goes here\nconst app = createApp({});\napp.use(LoadingPlugin);\napp.mount('#app');\n```\n\nThen use the plugin in your components\n\n```html\n\n\u003ctemplate\u003e\n    \u003cform @submit.prevent=\"submit\"\n          class=\"vl-parent\"\n          ref=\"formContainer\"\u003e\n        \u003c!-- your form inputs goes here--\u003e\n        \u003clabel\u003e\u003cinput type=\"checkbox\" v-model=\"fullPage\"\u003eFull page?\u003c/label\u003e\n        \u003cbutton type=\"submit\"\u003eLogin\u003c/button\u003e\n    \u003c/form\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n    export default {\n        data() {\n            return {\n                fullPage: false\n            }\n        },\n        methods: {\n            submit() {\n                let loader = this.$loading.show({\n                    // Optional parameters\n                    container: this.fullPage ? null : this.$refs.formContainer,\n                    canCancel: true,\n                    onCancel: this.onCancel,\n                });\n                // simulate AJAX\n                setTimeout(() =\u003e {\n                    loader.hide()\n                }, 5000)\n            },\n            onCancel() {\n                console.log('User cancelled the loader.')\n            }\n        }\n    }\n\u003c/script\u003e\n```\n\n#### or same with Composition API\n\n```html\n\u003cscript setup\u003e\n    import {ref, inject} from 'vue'\n    import {useLoading} from 'vue-loading-overlay'\n    \n    const $loading = useLoading({\n        // options\n    });\n    // or use inject without importing useLoading\n    // const $loading =  inject('$loading')\n\n    const fullPage = ref(false)\n\n    const submit = () =\u003e {\n        const loader = $loading.show({\n            // Optional parameters\n        });\n        // simulate AJAX\n        setTimeout(() =\u003e {\n            loader.hide()\n        }, 5000)\n    }\n\u003c/script\u003e\n```\n\n## Available props\n\nThe component accepts these props:\n\n| Attribute        | Type                | Default              | Description      |\n| :---             | :---:               | :---:                | :---             |\n| active           | Boolean             | `false`              | Show loading by default when `true`, use it as `v-model:active` |\n| can-cancel       | Boolean             | `false`              | Allow user to cancel by pressing ESC or clicking outside |\n| on-cancel        | Function            | `()=\u003e{}`             | Do something upon cancel, works in conjunction with `can-cancel`  |\n| is-full-page     | Boolean             | `true`               | When `false`; limit loader to its container^ |\n| transition       | String              | `fade`               | Transition name |\n| color            | String              | `#000`               | Customize the color of loading icon |\n| height           | Number              | *                    | Customize the height of loading icon |\n| width            | Number              | *                    | Customize the width of loading icon |\n| loader           | String              | `spinner`            | Name of icon shape you want use as loader, `spinner` or `dots` or `bars` |\n| background-color | String              | `#fff`               | Customize the overlay background color |\n| opacity          | Number              | `0.5`                | Customize the overlay background opacity |\n| z-index          | Number              | `9999`               | Customize the overlay z-index |\n| enforce-focus    | Boolean             | `true`               | Force focus on loader |\n| lock-scroll      | Boolean             | `false`              | Freeze the scrolling during full screen loader |\n\n* ^When `is-full-page` is set to `false`, the container element should be positioned as `position: relative`. You can\n  use CSS helper class `vl-parent`.\n* *The default `height` and `width` values may vary based on the `loader` prop value\n\n## Available slots\n\nThe component accepts these slots:\n\n* `default` - Replace the animated icon with yours\n* `before` - Place anything before the animated icon, you may need to style this.\n* `after` - Place anything after the animated icon, you may need to style this.\n\n## API methods\n\n### `this.$loading.show(?propsData,?slots)`\n\n```js\nimport {h} from 'vue';\n\nlet loader = this.$loading.show({\n    // Pass props by their camelCased names\n    container: this.$refs.loadingContainer,\n    canCancel: true, // default false\n    onCancel: this.yourCallbackMethod,\n    color: '#000000',\n    loader: 'spinner',\n    width: 64,\n    height: 64,\n    backgroundColor: '#ffffff',\n    opacity: 0.5,\n    zIndex: 999,\n}, {\n    // Pass slots by their names\n    default: h('your-custom-loader-component-name'),\n});\n// hide loader whenever you want\nloader.hide();\n```\n\n## Global configs\n\nYou can set props and slots for all future instances when using as plugin\n\n```js\napp.use(LoadingPlugin, {\n    // props\n    color: 'red'\n}, {\n    // slots\n})\n```\n\nFurther you can override any prop or slot when creating new instances\n\n```js\nlet loader = this.$loading.show({\n    color: 'blue'\n}, {\n    // override slots\n});\n```\n\n## Use directly in browser (with CDN)\n\n```html\n\u003c!-- Vue js --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue@3.3\"\u003e\u003c/script\u003e\n\u003c!-- Lastly add this package --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-loading-overlay@6\"\u003e\u003c/script\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/npm/vue-loading-overlay@6/dist/css/index.css\" rel=\"stylesheet\"\u003e\n\u003c!-- Init the plugin and component--\u003e\n\u003cscript\u003e\n    const app = Vue.createApp({});\n    app.use(VueLoading.LoadingPlugin);\n    app.component('loading', VueLoading.Component)\n    app.mount('#app')\n\u003c/script\u003e\n```\n\n## Run examples on your localhost\n\n* Clone this repo\n* Make sure you have node-js `\u003e=20.11` and [pnpm](https://pnpm.io/) `\u003e=8.x` pre-installed\n* Install dependencies `pnpm install`\n* Run webpack dev server `npm start`\n* This should open the demo page in your default web browser\n\n## Testing\n\n* This package is using [Jest](https://github.com/facebook/jest)\n  and [vue-test-utils](https://github.com/vuejs/test-utils) for testing.\n* Execute tests with this command `npm test`\n\n## License\n\n[MIT](LICENSE.txt) License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankurk91%2Fvue-loading-overlay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fankurk91%2Fvue-loading-overlay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankurk91%2Fvue-loading-overlay/lists"}