{"id":20498567,"url":"https://github.com/rascal-coder/vue-loading","last_synced_at":"2026-02-13T10:39:42.593Z","repository":{"id":215599134,"uuid":"739302220","full_name":"Rascal-Coder/vue-loading","owner":"Rascal-Coder","description":"vue-loading","archived":false,"fork":false,"pushed_at":"2024-01-09T04:21:59.000Z","size":1929,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-03T06:08:13.892Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://rascal-coder.github.io/vue-loading/","language":"Vue","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/Rascal-Coder.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":"2024-01-05T08:38:24.000Z","updated_at":"2024-01-06T11:41:10.000Z","dependencies_parsed_at":"2025-01-16T06:44:38.545Z","dependency_job_id":null,"html_url":"https://github.com/Rascal-Coder/vue-loading","commit_stats":null,"previous_names":["rascal-coder/vue-loading"],"tags_count":48,"template":false,"template_full_name":null,"purl":"pkg:github/Rascal-Coder/vue-loading","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rascal-Coder%2Fvue-loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rascal-Coder%2Fvue-loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rascal-Coder%2Fvue-loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rascal-Coder%2Fvue-loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rascal-Coder","download_url":"https://codeload.github.com/Rascal-Coder/vue-loading/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rascal-Coder%2Fvue-loading/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29401993,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-13T06:24:03.484Z","status":"ssl_error","status_checked_at":"2026-02-13T06:23:12.830Z","response_time":78,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-11-15T18:14:46.669Z","updated_at":"2026-02-13T10:39:42.555Z","avatar_url":"https://github.com/Rascal-Coder.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Loading Overlay Component\n\nVue.js component for full screen loading indicator\nOriginal author [ankurk91](https://github.com/ankurk91/vue-loading-overlay/)\n\n## [Demo](https://rascal-coder.github.io/vue-loading/)\n\n### Version matrix\n\n| Vue.js version | Package version |                                                           Branch |\n| :---           |:---------------:|-----------------------------------------------------------------:| \n| 3.x            |       6.x       |                                                           `main` |\n\n## Installation\n\n```bash\nnpm install @rascoder/vue-loading\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 '@rascoder/vue-loading';\n    import '@rascoder/vue-loading/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 '@rascoder/vue-loading';\nimport '@rascoder/vue-loading/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 '@rascoder/vue-loading'\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              | `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/)|\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\n## Run examples on your localhost\n\n* Clone this repo\n* Make sure you have node-js `\u003e=18.16` 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%2Frascal-coder%2Fvue-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frascal-coder%2Fvue-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frascal-coder%2Fvue-loading/lists"}