{"_id":"@aacassandra/vue3-progressbar","_rev":"4-8aa3077e693aaa629dd557a354c5da25","name":"@aacassandra/vue3-progressbar","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@aacassandra/vue3-progressbar","version":"1.0.0","description":"A lightweight progress bar for vuejs 3","main":".dist/vue3-progressbar.common.js","publishConfig":{"access":"public"},"scripts":{"serve":"vue-cli-service serve","build":"vue-cli-service build","lint":"vue-cli-service lint","build-library":"vue-cli-service build --target lib --name vue3-progressbar ./src/index.js"},"author":{"name":"Alauddin Afif Cassandra","email":"alauddinafifcassandra@programmer.net","url":"https://aacassandra-github.web.app"},"repository":{"type":"git","url":"git+https://github.com/aacassandra/vue3-progressbar.git"},"bugs":{"url":"https://github.com/aacassandra/vue3-progressbar/issues"},"homepage":"https://github.com/aacassandra/vue3-progressbar#readme","keywords":["vue","vue-progressbar","vue loading progress","vue progressbar","vue3","vue3-progressbar","vue3 loading progress","vue3 progressbar","progressbar"],"license":"MIT","dependencies":{"core-js":"^3.6.5","vue":"^3.0.0"},"devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.0.0","@vue/eslint-config-prettier":"^6.0.0","babel-eslint":"^10.1.0","eslint":"^6.7.2","eslint-plugin-prettier":"^3.1.3","eslint-plugin-vue":"^7.0.0-0","prettier":"^1.19.1"},"gitHead":"ae64cdb256e86db2aac02933c0d599e16b9669c1","_id":"@aacassandra/vue3-progressbar@1.0.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-3na7e8DncaO06SY0/53OeC8AnIq6cU1fiPQapuJ8gFBS+PASXZHAzbHF67TS76b3gOJko3OBUozHQajAy0NlpA==","shasum":"da498ff1f064ae2c3a9749a6257f35d4a65be807","tarball":"https://registry.npmjs.org/@aacassandra/vue3-progressbar/-/vue3-progressbar-1.0.0.tgz","fileCount":11,"unpackedSize":151656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzjccCRA9TVsSAnZWagAAGXkP/jmSolpPZ+hldwxlpKHs\nToaGlTLM3x2uQXZ/MbWszWSb02tlP4UszZb5X28JncQ/ffaGLN2VdS/nrMDT\nWFmH18lTyOzbMKKPjiVyeS6Sr0Z9jLbzPEY4Is6kr/zvTeFNovP6CVlNKTLW\n9x2Rnw7c9F79VfCSdBIFuS3oTDHnp8dEr+NK+i/GtFhkgOCk30jk3tWbZNpC\nLwdyRVHauwy/lNY0i3FSKtpH57EUEmzrPebedf4XkEThvvjtOHwZtTC9Fzc0\ne33ac1XgigOERt5BZRyUbtFfyKDY9ppvgT/RwVZKHc7odqQxk1qqAXT+cpe0\nz89dKYBTTpfYgJkBbdDP9acfzM3d2w0A2kQXI32DYaYUmBmPODwpIKcq0RI/\nGUP2WuEJCKFVyr0CvRR1ERDps7ix/Rvt5FPlEnnt1U8vxBLcWXcAV4+8gQor\nDsoNlc2fcK0+GivjqLa144bi64eKTz/o6jgR/cx+U7yyFpTi6tTx/UO1dbuZ\nS5hRq+CeD4yhMnDQMRhdeOYgCjcvVIFCW6T98aTrMQzuZLi+gDyXOR+N+Fkl\nN4Nig00BvUx2kXKSGUz8w+MSn8HFS3pDsm6YE8EjvGt/KeqHgXhe4n3a5mn7\nzFX6UkFXuu3V27gjX0kwQkr7YPt25D3hicB11RmMvquE7RBG4FSlvnxbM7xm\nMUQE\r\n=+R5s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEI7VQjaKaJHLBM4Itdne6YfI7FsbUgoUpU6HPqFQ/3sAiEAux46HoUcaxdarJPM9PP0/RNLHUok769doMNAuRdchdo="}]},"_npmUser":{"name":"aacassandra","email":"alauddinafifcassandra@programmer.net"},"directories":{},"maintainers":[{"name":"aacassandra","email":"alauddinafifcassandra@programmer.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue3-progressbar_1.0.0_1607350044108_0.6952751286240835"},"_hasShrinkwrap":false},"1.0.1":{"name":"@aacassandra/vue3-progressbar","version":"1.0.1","description":"A lightweight progress bar for vuejs 3","main":"dist/vue3-progressbar.common.js","publishConfig":{"access":"public"},"scripts":{"serve":"vue-cli-service serve","build":"vue-cli-service build","lint":"vue-cli-service lint","build-library":"vue-cli-service build --target lib --name vue3-progressbar ./src/index.js"},"author":{"name":"Alauddin Afif Cassandra","email":"alauddinafifcassandra@programmer.net","url":"https://aacassandra-github.web.app"},"repository":{"type":"git","url":"git+https://github.com/aacassandra/vue3-progressbar.git"},"bugs":{"url":"https://github.com/aacassandra/vue3-progressbar/issues"},"homepage":"https://github.com/aacassandra/vue3-progressbar#readme","keywords":["vue","vue-progressbar","vue loading progress","vue progressbar","vue3","vue3-progressbar","vue3 loading progress","vue3 progressbar","progressbar"],"license":"MIT","dependencies":{"core-js":"^3.6.5","vue":"^3.0.0"},"devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.0.0","@vue/eslint-config-prettier":"^6.0.0","babel-eslint":"^10.1.0","eslint":"^6.7.2","eslint-plugin-prettier":"^3.1.3","eslint-plugin-vue":"^7.0.0-0","prettier":"^1.19.1"},"gitHead":"f7b9ec295aa23e48afa49a89543d56ed2e45455a","_id":"@aacassandra/vue3-progressbar@1.0.1","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-wiFp+K4KULGQO1KB7UWBtkKivaG/nDro8mVJJXyI0zWZ5c+2PN3h0GzGl9T5EaZ1wQNCLIiP4ZUJdu4U7mzT8g==","shasum":"48d191ed9d45cbf21c9a70309b2f60ff482fd13f","tarball":"https://registry.npmjs.org/@aacassandra/vue3-progressbar/-/vue3-progressbar-1.0.1.tgz","fileCount":11,"unpackedSize":151655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzjhdCRA9TVsSAnZWagAA7NYP/0pr4fqvvUjfuhwFeWQc\n+Ntt+6mD1y4Ak0YylJOJic6OvuWqET5QoVA1JwatkD2uUzjW9H09jbq3B0Vn\nyFESIcnYXNOmLao5Bx+qfPLvX156bGB2nl8PaAv86V594eqVgovkoDBMWmpQ\n+NJ4D63b1hZGO7nU87ZBoRXGVJTGu8TcfT68MHVq8BfAFTQqcbNCzLaG9ddr\n5K5fvyiSykR5LldNGYwWUUx26pXGpjPnaLSaLOLEfnD52DkXJYnQfzgtyYf/\nDsTi2nhyQNJM67NAh70xWgfobPluZZw/361orP9RmDzKoHT3W218bK0EBpZv\n3tPHs75GpzyU0D0AGqVoExuJfA9+3ZGXJ0sh1AbgF3gdDCuAqYcWoWletyrE\nzQMh2WHIhpQnvNjeePXo43Ssqma+xyYvBrbHIOa27jdUk1c/8CyH2vH61uPM\n5IAZFk1Hyb7LW9JlOjqJT7FFCxFLWqcei8BloxgSZ8fQTWCIS/zwpO5shFzE\nSMMhkzRSKu7i+qksh7ueSKcn7Ia1WQRgkfBB8mIFT4FxCMKneYAEL+VHHb3r\neknPBftbRTJI/1rdnyTHx1hAQriGPdWDBOQaSI3P5UC5Fz789BHLFHUNhKbO\nepw7es1IZ0MHhrLWA1Eds0K14yjqTKVxibZ4TqXjGMYBO8/12FeV6TfKScIB\nXovf\r\n=ToLu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCR1uvHimpl7jFvrT+xbelTWybo+IqQ9nzz9jSORckf8QIhAITznztk+7JD6SwcwmbeMnaVuKGUaVR99rdZtuOvZdxQ"}]},"_npmUser":{"name":"aacassandra","email":"alauddinafifcassandra@programmer.net"},"directories":{},"maintainers":[{"name":"aacassandra","email":"alauddinafifcassandra@programmer.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue3-progressbar_1.0.1_1607350363013_0.5455685130274877"},"_hasShrinkwrap":false},"1.0.2":{"name":"@aacassandra/vue3-progressbar","version":"1.0.2","description":"A lightweight progress bar for vuejs 3","main":"dist/vue3-progressbar.common.js","publishConfig":{"access":"public"},"scripts":{"serve":"vue-cli-service serve","build":"vue-cli-service build","lint":"vue-cli-service lint","build-library":"vue-cli-service build --target lib --name vue3-progressbar ./src/index.js"},"author":{"name":"Alauddin Afif Cassandra","email":"alauddinafifcassandra@programmer.net","url":"https://aacassandra-github.web.app"},"repository":{"type":"git","url":"git+https://github.com/aacassandra/vue3-progressbar.git"},"bugs":{"url":"https://github.com/aacassandra/vue3-progressbar/issues"},"homepage":"https://github.com/aacassandra/vue3-progressbar#readme","keywords":["vue","vue-progressbar","vue loading progress","vue progressbar","vue3","vue3-progressbar","vue3 loading progress","vue3 progressbar","progressbar"],"license":"MIT","dependencies":{"core-js":"^3.6.5","vue":"^3.0.0"},"devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.0.0","@vue/eslint-config-prettier":"^6.0.0","babel-eslint":"^10.1.0","eslint":"^6.7.2","eslint-plugin-prettier":"^3.1.3","eslint-plugin-vue":"^7.0.0-0","prettier":"^1.19.1"},"gitHead":"4cc09d8db722945dbfc13df7df7537688afef6ce","_id":"@aacassandra/vue3-progressbar@1.0.2","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-ZwOWeLzOMqJsPYAiI1+cAwPG3ILVJiZIsZ5EYxFpOdOStxpHz7VvilqmlOdOjyPsJlMempIfoXln5jTP2/19LA==","shasum":"4cfb3c5ab8f6196adc70bb52a085a1b243fae81c","tarball":"https://registry.npmjs.org/@aacassandra/vue3-progressbar/-/vue3-progressbar-1.0.2.tgz","fileCount":11,"unpackedSize":151344,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzktzCRA9TVsSAnZWagAA9LYP/RLRyJN7K7Y4x8+/tc5/\nbObozsIK1VH4YXhNUEEe2hUP8tHqmAvPgoCZLRf7HxtP0c2DVlXVqRvmvkE/\nPuoFDUAthmlLuaBRGdjCenQnfaGg3ZehzutWcN/LSlcvEiFML4Rdw8ZT94sA\nBZTllTcqghASFkRSofQ19DaW42+MaS2riI1lBdhUqI4H00psPqX3Uos9YQli\nty/g6A0yivyVSwxSaNNv8ydNvVlRDvx4B+kMhy6Sycmy1l6J5xqt0Pt8LuXL\nggEOZsaxnxEZw5Db4Crj1tGfsefWOjk16GAYzDUDBgAYTVb4uIJkw2E5lbA/\nZ9YRubmPn8o/T7mkh9D8ppUVnMLoDBxTi1e1nd47c1jR/uIK+NtA9J9k926L\nxB15vMZd8qg2GJaP1TCBjv+ExaVfB2HultbBCzxf16k9FaTczBVNEfClPs00\nguhvmBkpQ06bIYCKiS2BI8sUI+mUZImOQtefzUFX6PcZJGZ7P0x1PJGfZ2jc\nu8XfGL8NvVhuoC2T6C29sP9qtmx7J+MggcVUD4ve19h1ryytHsC+25TbhltK\nYYuOA1y5InSZV00vpfD8Rrh9FSLq5/BIlRqYitM5izdNXZWjqWRNFnHELs2/\nBQrA9RksEnUUvHKY7JNfkCOc46gVBc9CAY7UNX6oIyzy72B6OgL3bnlBNvJc\n8Okn\r\n=R63A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYkJj3GUhE9N5dZ1AgDyZX32I/8KNllkioKNybDLuF7QIgEmUvtt+GMAyyvBxL+yeZdkjKd62DdjzUMVJ3oL1mXxc="}]},"_npmUser":{"name":"aacassandra","email":"alauddinafifcassandra@programmer.net"},"directories":{},"maintainers":[{"name":"aacassandra","email":"alauddinafifcassandra@programmer.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue3-progressbar_1.0.2_1607355250432_0.3920965744250071"},"_hasShrinkwrap":false},"1.0.3":{"name":"@aacassandra/vue3-progressbar","version":"1.0.3","description":"A lightweight progress bar for vuejs 3","main":"dist/vue3-progressbar.common.js","publishConfig":{"access":"public"},"scripts":{"serve":"vue-cli-service serve","build":"vue-cli-service build","lint":"vue-cli-service lint","build-library":"vue-cli-service build --target lib --name vue3-progressbar ./src/index.js"},"author":{"name":"Alauddin Afif Cassandra","email":"alauddinafifcassandra@programmer.net","url":"https://aacassandra-github.web.app"},"repository":{"type":"git","url":"git+https://github.com/aacassandra/vue3-progressbar.git"},"bugs":{"url":"https://github.com/aacassandra/vue3-progressbar/issues"},"homepage":"https://github.com/aacassandra/vue3-progressbar#readme","keywords":["vue","vue-progressbar","vue loading progress","vue progressbar","vue3","vue3-progressbar","vue3 loading progress","vue3 progressbar","progressbar"],"license":"MIT","dependencies":{"core-js":"^3.6.5","vue":"^3.0.0"},"devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.0.0","@vue/eslint-config-prettier":"^6.0.0","babel-eslint":"^10.1.0","eslint":"^6.7.2","eslint-plugin-prettier":"^3.1.3","eslint-plugin-vue":"^7.0.0-0","prettier":"^1.19.1"},"gitHead":"ed1e0099bed3eafc706fe3c92a2691cd0e82be89","_id":"@aacassandra/vue3-progressbar@1.0.3","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-e4SlgYwXiNABJbHYOChs3aSiCyR+1D6WAjWR1zo3vCs/9k6Vjj2GIPXWNJA/YP4RhlQS4eSC3RtCPC95CfAEbw==","shasum":"12df4a135968a43af2d2a5753174587e5cc5cb95","tarball":"https://registry.npmjs.org/@aacassandra/vue3-progressbar/-/vue3-progressbar-1.0.3.tgz","fileCount":10,"unpackedSize":145251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzlO9CRA9TVsSAnZWagAAc5UP/RuB/3TAr5+1sPVaK47U\nS+SUkSe90EYhfHg10iUtK1d5kabKmZYatHIcCza3glVuXRd7nR56zJThm3gh\nnpJLmDiczUc4powRTdCZEByN3Q42F3z89ZCCcJ+zfMyEsosUZC7RctZVMhs8\nS8D298VyzD3z6frIMfkRCiFk1eWIZoDmVxbfkc1aWTMvj/8Hasiiv0khAFpa\neSTHkz24j8njqF0lKgfGsmeO8htXkJ+iIgl+BfKfO6OkyTKBWO5lbvOP4pVc\nO1S6ouWXnB9rw2G2Wy1OJX7juj77Wm4NHl7fZ0M49Oa2F6tnNSHQgxgsvheY\nj/GDjq798IXkLYcsgjAHxiT8JGiifiPmRGv4kX0LyRveRG3emRoaz695X5hR\np5kaJlpTBD6IDIBbE7r7r61Gumhw+xsJVgV0pOVQO6fUXtpuek7jb1/DAy2L\nERjNvg/rzmylqhLHSEQTA2mUfu9rnntK5mBdUCYi8UE5k4nDP1cEn2GvJowK\nWRsrzh8doBfBTBGDxCSYNbjA7VX2kDEJtBWuPwWwBl001ZEYYoKeI0bKyKVo\nTyFOx+XoybnJA/vt1FEYjtlQrcFbWdHM1xSXmBeNGZWGEWwbsuJ+vnGJxrtd\ncJbBIe2vElrUHRTZOiZmgPO1XFyUZvoiWU+E7IC2pBewNPva0ogVkaBK7dm9\nMCsw\r\n=k+XB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrdAmVjCu5zuIhWhyBagl85wkm0NyUlx6p/AF8BdGlfAIhANXbbuTs2ldTRZ50rPyzN40o7d4ZjZ2JFhBEtFAWuwze"}]},"_npmUser":{"name":"aacassandra","email":"alauddinafifcassandra@programmer.net"},"directories":{},"maintainers":[{"name":"aacassandra","email":"alauddinafifcassandra@programmer.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue3-progressbar_1.0.3_1607357373251_0.40907860459484713"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-07T14:07:24.070Z","1.0.0":"2020-12-07T14:07:24.266Z","modified":"2022-04-04T10:54:56.682Z","1.0.1":"2020-12-07T14:12:45.132Z","1.0.2":"2020-12-07T15:34:10.622Z","1.0.3":"2020-12-07T16:09:33.439Z"},"maintainers":[{"name":"aacassandra","email":"alauddinafifcassandra@programmer.net"}],"description":"A lightweight progress bar for vuejs 3","homepage":"https://github.com/aacassandra/vue3-progressbar#readme","keywords":["vue","vue-progressbar","vue loading progress","vue progressbar","vue3","vue3-progressbar","vue3 loading progress","vue3 progressbar","progressbar"],"repository":{"type":"git","url":"git+https://github.com/aacassandra/vue3-progressbar.git"},"author":{"name":"Alauddin Afif Cassandra","email":"alauddinafifcassandra@programmer.net","url":"https://aacassandra-github.web.app"},"bugs":{"url":"https://github.com/aacassandra/vue3-progressbar/issues"},"license":"MIT","readme":"<img align=\"right\" width=\"200\" src=\"https://user-images.githubusercontent.com/29236058/101346079-a21fd600-38ba-11eb-9501-ff17ab71364b.png\" />\n\n# Vue 3 Progressbar\n\nPreviously, we would like to first thank for the developers who have been willing to help developers around the world, especially those who contribute to [hilongjw/vue-progressbar](https://github.com/hilongjw/vue-progressbar). Here I continue from the previous development to provide support for vuejs version 3.\n\n# Table of Contents\n\n- [**_Demo_**](#demo)\n- [**_Requirements_**](#requirements)\n- [**_Installation_**](#installation)\n- [**_Usage_**](#usage)\n- [**_Constructor Options_**](#constructor-options)\n- [**_Implementation_**](#implementation)\n- [**_vue-router_**](#vue-router)\n  - [**_meta options_**](#vue--router-meta-options)\n- [**_Methods_**](#methods)\n- [**_Examples_**](#examples)\n- [**_License_**](#license)\n\n# Demo\n\n[**_Demo_**](http://hilongjw.github.io/vue-progressbar/index.html)\n\n# Requirements\n\n- [Vue.js](https://github.com/vuejs/vue-next) `3.x`\n\n# Installation\n\n```bash\n# npm\n$ npm install @aacassandra/vue3-progressbar\n\n```\n\n# Usage\n\nmain.js\n\n```javascript\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport router from \"./router\";\nimport VueProgressBar from \"@aacassandra/vue3-progressbar\";\n\nconst options = {\n  color: \"#bffaf3\",\n  failedColor: \"#874b4b\",\n  thickness: \"5px\",\n  transition: {\n    speed: \"0.2s\",\n    opacity: \"0.6s\",\n    termination: 300,\n  },\n  autoRevert: true,\n  location: \"left\",\n  inverse: false,\n};\n\ncreateApp(App)\n  .use(VueProgressBar, options)\n  .use(router)\n  .mount(\"#app\");\n```\n\n## Constructor Options\n\n| key           | description                                                               | default                                              | options                           |\n| :------------ | ------------------------------------------------------------------------- | ---------------------------------------------------- | --------------------------------- |\n| `color`       | color of the progress bar                                                 | `'rgb(143, 255, 199)'`                               | `RGB` `HEX` `HSL` `HSV` `VEC`     |\n| `failedColor` | color of the progress bar upon load fail                                  | `'red'`                                              | `RGB`, `HEX`, `HSL`, `HSV`, `VEC` |\n| `thickness`   | thickness of the progress bar                                             | `'2px'`                                              | `px`, `em`, `pt`, `%`, `vh`, `vw` |\n| `transition`  | transition speed/opacity/termination of the progress bar                  | `{speed: '0.2s', opacity: '0.6s', termination: 300}` | `speed`, `opacity`, `termination` |\n| `autoRevert`  | will temporary color changes automatically revert upon completion or fail | `true`                                               | `true`, `false`                   |\n| `location`    | change the location of the progress bar                                   | `top`                                                | `left`, `right`, `top`, `bottom`  |\n| `position`    | change the position of the progress bar                                   | `fixed`                                              | `relative`, `absolute`, `fixed`   |\n| `inverse`     | inverse the direction of the progress bar                                 | `false`                                              | `true`, `false`                   |\n| `autoFinish`  | allow the progress bar to finish automatically when it is close to 100%   | `true`                                               | `true`, `false`                   |\n\n## Implementation\n\nApp.vue\n\n```html\n<template>\n  <div id=\"app\">\n    <!-- for example router view -->\n    <router-view></router-view>\n    <!-- set progressbar -->\n    <vue-progress-bar></vue-progress-bar>\n  </div>\n</template>\n\n<script>\n  export default {\n    mounted() {\n      //  [App.vue specific] When App.vue is finish loading finish the progress bar\n      this.$Progress.finish();\n    },\n    created() {\n      //  [App.vue specific] When App.vue is first loaded start the progress bar\n      this.$Progress.start();\n      //  hook the progress bar to start before we move router-view\n      this.$router.beforeEach((to, from, next) => {\n        //  does the page we want to go to have a meta.progress object\n        if (to.meta.progress !== undefined) {\n          let meta = to.meta.progress;\n          // parse meta tags\n          this.$Progress.parseMeta(meta);\n        }\n        //  start the progress bar\n        this.$Progress.start();\n        //  continue to next page\n        next();\n      });\n      //  hook the progress bar to finish after we've finished moving router-view\n      this.$router.afterEach((to, from) => {\n        //  finish the progress bar\n        this.$Progress.finish();\n      });\n    },\n  };\n</script>\n```\n\n## vue-router\n\n```js\nexport default [\n  {\n    path: \"/achievement\",\n    name: \"achievement\",\n    component: \"./components/Achievement.vue\",\n    meta: {\n      progress: {\n        func: [\n          { call: \"color\", modifier: \"temp\", argument: \"#ffb000\" },\n          { call: \"fail\", modifier: \"temp\", argument: \"#6e0000\" },\n          { call: \"location\", modifier: \"temp\", argument: \"top\" },\n          {\n            call: \"transition\",\n            modifier: \"temp\",\n            argument: { speed: \"1.5s\", opacity: \"0.6s\", termination: 400 },\n          },\n        ],\n      },\n    },\n  },\n];\n```\n\n### vue-router meta options\n\n| call       | modifier      | argument | example                                                                                                |\n| :--------- | ------------- | -------- | ------------------------------------------------------------------------------------------------------ |\n| color      | `set`, `temp` | `string` | `{call: 'color', modifier: 'temp', argument: '#ffb000'}`                                               |\n| fail       | `set`, `temp` | `string` | `{call: 'fail', modifier: 'temp', argument: '#ffb000'}`                                                |\n| location   | `set`, `temp` | `string` | `{call: 'location', modifier: 'temp', argument: 'top'}`                                                |\n| transition | `set`, `temp` | `object` | `{call: 'transition', modifier: 'temp', argument: {speed: '0.6s', opacity: '0.6s', termination: 400}}` |\n\n# Methods\n\n| function         | description                                                                       | parameters           | example                                     |\n| :--------------- | --------------------------------------------------------------------------------- | -------------------- | ------------------------------------------- |\n| start            | start the progress bar loading                                                    | `N/A`                | `this.$Progress.start()`                    |\n| finish           | finish the progress bar loading                                                   | `N/A`                | `this.$Progress.finish()`                   |\n| fail             | cause the progress bar to end and fail                                            | `N/A`                | `this.$Progress.fail()`                     |\n| increase         | increase the progress bar by a certain %                                          | `number: integer`    | `this.$Progress.increase(number)`           |\n| decrease         | decrease the progress bar by a certain %                                          | `number: integer`    | `this.$Progress.decrease(number)`           |\n| set              | set the progress bar %                                                            | `number: integer`    | `this.$Progress.set(number)`                |\n| setFailColor     | cause the fail color to permanently change                                        | `color: string`      | `this.$Progress.setFailColor(color)`        |\n| setColor         | cause the progress color to permanently change                                    | `color: string`      | `this.$Progress.setColor(color)`            |\n| setLocation      | cause the progress bar location to permanently change                             | `location: string`   | `this.$Progress.setLocation(location)`      |\n| setTransition    | cause the progress bar transition speed/opacity/termination to permanently change | `transition: object` | `this.$Progress.setTransition(transition)`  |\n| tempFailColor    | cause the fail color to change (temporarily)                                      | `color: string`      | `this.$Progress.tempFailColor(color)`       |\n| tempColor        | cause the progress color to change (temporarily)                                  | `color: string`      | `this.$Progress.tempColor(color)`           |\n| tempLocation     | cause the progress bar location to change (temporarily)                           | `location: string`   | `this.$Progress.tempLocation(location)`     |\n| tempTransition   | cause the progress bar location to change (temporarily)                           | `transition: object` | `this.$Progress.tempTransition(transition)` |\n| revertColor      | cause the temporarily set progress color to revert back to it's previous color    | `N/A`                | `this.$Progress.revertColor()`              |\n| revertFailColor  | cause the temporarily set fail color to revert back to it's previous color        | `N/A`                | `this.$Progress.revertFailColor()`          |\n| revertTransition | cause the temporarily set transition to revert back to it's previous state        | `N/A`                | `this.$Progress.revertTransition()`         |\n| revert           | cause the temporarily set progress and/or fail color to their previous colors     | `N/A`                | `this.$Progress.revert()`                   |\n| parseMeta        | parses progress meta data                                                         | `meta: object`       | `this.$Progress.parseMeta(meta)`            |\n\n# Examples\n\nLoading Data (vue-resource)\n\n```html\n<script>\n  export default {\n    methods: {\n      test() {\n        this.$Progress.start();\n        this.$http\n          .jsonp(\n            \"http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json?apikey=7waqfqbprs7pajbz28mqf6vz\"\n          )\n          .then(\n            (response) => {\n              this.$Progress.finish();\n            },\n            (response) => {\n              this.$Progress.fail();\n            }\n          );\n      },\n    },\n  };\n</script>\n```\n\n---\n\nAccessing the progress bar externally through the vue instance (e.g. axios interceptors)\n\n**main.js**\n\n```js\n// main.js from Usage section\n\nVue.use(VueProgressBar, options);\n\nexport default new Vue({\n  // export the Vue instance\n  ...App,\n}).$mount(\"#app\");\n```\n\n**api-axios.js**\n\n```js\nimport axios from \"axios\";\nimport app from \"../main\"; // import the instance\n\nconst instance = axios.create({\n  baseURL: \"/api\",\n});\n\ninstance.interceptors.request.use((config) => {\n  app.$Progress.start(); // for every request start the progress\n  return config;\n});\n\ninstance.interceptors.response.use((response) => {\n  app.$Progress.finish(); // finish when a response is received\n  return response;\n});\n\nexport default instance; // export axios instance to be imported in your app\n```\n\n# LICENSE\n\n```\nMIT License\n\nCopyright (c) 2020 Alauddin Afif Cassandra\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n```\n\nSee [more](https://github.com/aacassandra/vue3-progressbar/blob/master/LICENSE) about LICENSE\n","readmeFilename":"README.md"}