{"id":15067457,"url":"https://github.com/tahq69/vue-loading","last_synced_at":"2025-07-04T06:34:38.498Z","repository":{"id":71381646,"uuid":"94707340","full_name":"tahq69/vue-loading","owner":"tahq69","description":"Loading bar for Vue.js apps using axios","archived":false,"fork":false,"pushed_at":"2018-06-09T13:44:24.000Z","size":1008,"stargazers_count":17,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T14:21:24.334Z","etag":null,"topics":["axios","crip","loader","loading","loading-bar","vue","vue-component","vuejs2"],"latest_commit_sha":null,"homepage":null,"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/tahq69.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2017-06-18T19:06:46.000Z","updated_at":"2023-06-09T13:10:07.000Z","dependencies_parsed_at":"2023-05-25T19:16:38.133Z","dependency_job_id":null,"html_url":"https://github.com/tahq69/vue-loading","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tahq69%2Fvue-loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tahq69%2Fvue-loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tahq69%2Fvue-loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tahq69%2Fvue-loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tahq69","download_url":"https://codeload.github.com/tahq69/vue-loading/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248190548,"owners_count":21062285,"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":["axios","crip","loader","loading","loading-bar","vue","vue-component","vuejs2"],"created_at":"2024-09-25T01:24:14.097Z","updated_at":"2025-04-10T16:40:35.627Z","avatar_url":"https://github.com/tahq69.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# crip-vue-loading\n\n\u003e A Vue.js project to wrap axios and display global loading bar of http requests.\nFor more details read [documentation with examples](http://rawgit.com/tahq69/vue-loading/master/index.html)\n\n## Usage\n\n### Install\n```bash\n\u003e npm i -S crip-vue-loading\n```\n\n### Setup\n```javascript\nimport Vue from \"vue\"\nimport CripLoading from \"crip-vue-loading\"\nimport axios from \"axios\"\n\n// Install component in to Vue instance and inject in to axios.\nVue.use(CripLoading, {axios})\n\n// If you use \"vue-router\" and do not disable `applyOnRouter` option\n// make sure you install plugin before router:\n// https://github.com/vuejs/vue-router/issues/315\n\n```\n\n### Display loading bar\n```vue\n// App.vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"container\"\u003e\n\n    \u003cdiv class=\"row\"\u003e\n      \u003cdiv class=\"col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2\"\u003e\n        \u003cbutton class=\"btn btn-primary\" @click=\"save($event, 2)\"\u003eSave\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import axios from 'axios'\n  \n  export default {\n    methods: {\n      async save (e, timeout = 0) {\n        try {\n          // simply call axios to save or request data and loading bar will\n          // show up while response is not received from server.\n          await axios.get(`http://www.fakeresponse.com/api/?sleep=${timeout}`)\n        } catch (err) {\n          console.error(err)\n        }\n      },\n    },\n  }\n\u003c/script\u003e\n```\n\n## TODO:\n\n- Add algorithm with exponential progression instead of current linear;\n\n## Build Setup\n\n```bash\n# install dependencies and serve with hot reload at localhost:8080\n\u003e npm i \u0026\u0026 npm run dev\n```\n\n## Release steps\n\n```bash\n\u003e npm run release\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftahq69%2Fvue-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftahq69%2Fvue-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftahq69%2Fvue-loading/lists"}