{"id":29275537,"url":"https://github.com/helmab/vue-loading","last_synced_at":"2025-07-05T06:11:12.116Z","repository":{"id":34459046,"uuid":"179289720","full_name":"HELMAB/vue-loading","owner":"HELMAB","description":"Loading screen for Vue app","archived":false,"fork":false,"pushed_at":"2024-10-29T18:05:46.000Z","size":3228,"stargazers_count":21,"open_issues_count":6,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-25T19:42:13.203Z","etag":null,"topics":["loading","vue","vue-loading","vue-loading-screen","vue-plugins","vuejs"],"latest_commit_sha":null,"homepage":"https://helmab.github.io/vue-loading/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HELMAB.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2019-04-03T12:54:01.000Z","updated_at":"2024-10-08T03:11:32.000Z","dependencies_parsed_at":"2024-01-02T23:28:42.434Z","dependency_job_id":"7f3df223-2289-40c2-b76b-f028d2b9f8c0","html_url":"https://github.com/HELMAB/vue-loading","commit_stats":{"total_commits":57,"total_committers":3,"mean_commits":19.0,"dds":0.3508771929824561,"last_synced_commit":"b30e2d9dbab05c1d897d0c200a35a04546158e1e"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/HELMAB/vue-loading","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HELMAB%2Fvue-loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HELMAB%2Fvue-loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HELMAB%2Fvue-loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HELMAB%2Fvue-loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HELMAB","download_url":"https://codeload.github.com/HELMAB/vue-loading/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HELMAB%2Fvue-loading/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263692940,"owners_count":23496945,"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":["loading","vue","vue-loading","vue-loading-screen","vue-plugins","vuejs"],"created_at":"2025-07-05T06:11:10.782Z","updated_at":"2025-07-05T06:11:12.105Z","avatar_url":"https://github.com/HELMAB.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vuejs Loading Screen \nUsing to block whlie client processed work. Please checkout [Demo](https://helmab.github.io/vue-loading/) to see how does it look like.\n\n![Screenshot](./src/assets/screenshot.png)\n\n## Installation\n\nFor vue 2\n\n```\nnpm i --save vuejs-loading-screen\n```\n\nor with vue 3\n\n```\nnpm i --save vue3-loading-screen\n```\n\n## Usage\n\nVue2:\n\n```js\nimport Vue from 'vue'\nimport loading from 'vuejs-loading-screen'\n\nVue.use(loading)\n```\n\nVue3:\n\n```js\nimport {createApp} from 'vue'\nimport App from './App.vue'\nimport Loading from 'vue3-loading-screen'\n\nconst app = createApp(App)\n\napp.use(Loading, /*{...}*/)\n\napp.mount('#app')\n\n```\n\nFrom now you can use `$isLoading` as globally function to trigger show/hide loading screen.\n\n```vue\n\u003ctemplate\u003e\n  \u003ch1\u003eWelcome to VueLoading Screen\u003c/h1\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    methods: {\n      sendHttpRequest () {\n        this.$isLoading(true) // show loading screen\n        this.$axios.post(url, params)\n        .then(({data}) =\u003e {\n            console.log(data)\n        })\n        .finally(() =\u003e {\n          this.$isLoading(false) // hide loading screen\n        })\n      }\n    },\n    mounted () {\n      this.sendHttpRequest()\n    }\n  }\n\u003c/script\u003e\n```\n\n## Customization\n\nIf you want to modify such background, icon size, color, type, you just configure options such:\n\n```js\nVue.use(loading, {\n    bg: '#41b883ad',\n    icon: 'refresh',\n    size: 3,\n    icon_color: 'white',\n})\n```\n\nor you can style the loading by yourself (TailwindCss as example):\n\n```js\nVue.use(loading, {\n  bg: '#41b883ad',\n  slot: `\n    \u003cdiv class=\"px-5 py-3 bg-gray-800 rounded\"\u003e\n      \u003ch3 class=\"text-3xl text-white\"\u003e\u003ci class=\"fas fa-spinner fa-spin\"\u003e\u003c/i\u003e Loading...\u003c/h3\u003e\n    \u003c/div\u003e\n  `\n})\n```\n\n## Translate your custom text\n\nStart from `main.js` file\n\n```js\nimport Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport loading from 'vuejs-loading-screen'\n\n// your i18n setup\nVue.use(VueI18n)\n\nconst messages = {\n  en: {\n    message: {\n      loading: 'Loading...'\n    }\n  },\n  km: {\n    message: {\n      loading: 'កំពុងដំណើរការ...'\n    }\n  }\n}\n\nconst i18n = new VueI18n({\n  locale: 'en', // set locale\n  messages, // set locale messages\n})\n\n// config loading plugins\nVue.use(loading, {\n  bg: '#41b883ad',\n  slot: `\n    \u003cdiv class=\"px-5 py-3 bg-gray-800 rounded\"\u003e\n      \u003ch3 class=\"text-3xl text-white\"\u003e\u003ci class=\"fas fa-spinner fa-spin\"\u003e\u003c/i\u003e ${ i18n.t('message.loading') }\u003c/h3\u003e\n    \u003c/div\u003e\n  `,\n})\n\nnew Vue({\n    i18n,\n    ...\n}).$mount('#app');\n\n```\n\nAnd then with `App.vue` file, we need to watch `$i18n.locale` and then call `$changeIsLoadingOptions` function to update plugin options.\n\n```js\nwatch: {\n  '$i18n.locale' () {\n    this.$changeIsLoadingOptions({slot: `\n      \u003cdiv class=\"px-5 py-3 bg-gray-800 rounded\"\u003e\n        \u003ch3 class=\"text-3xl text-white\"\u003e\u003ci class=\"fas fa-spinner fa-spin\"\u003e\u003c/i\u003e ${ this.$t('message.loading') }\u003c/h3\u003e\n      \u003c/div\u003e\n    `})\n  }\n}\n```\n\n## Configurations\n\n| Option        | Value           | Description  |\n| ------------- | -------------| -----|\n| bg      | `default: '#41b883ad'` | : color string |\n| icon      | `deault: 'fas fa-spinner'`      |   : support [font-awesome](https://www.npmjs.com/package/@fortawesome/fontawesome-free) |\n| size | `default: '3'`      |    : {1, 2, 3, 4, 5} string |\n| icon_color | `default: '#ffffff'`      |    : color string |\n| slot | `default: font-awesome`      |    : raw html |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhelmab%2Fvue-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhelmab%2Fvue-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhelmab%2Fvue-loading/lists"}