├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── src
    ├── VueRouterLoading.vue
    └── main.js
└── vue.config.js


/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |   },
 6 |   extends: ['plugin:vue/essential', 'plugin:vue/strongly-recommended', 'plugin:vue/recommended', '@vue/prettier'],
 7 |   rules: {
 8 |     'vue/html-self-closing': [
 9 |       'warn',
10 |       {
11 |         html: {
12 |           void: 'always',
13 |           normal: 'always',
14 |           component: 'always',
15 |         },
16 |         svg: 'always',
17 |         math: 'always',
18 |       },
19 |     ],
20 |     'vue/component-name-in-template-casing': [
21 |       'warn',
22 |       'PascalCase',
23 |       {
24 |         registeredComponentsOnly: false,
25 |         ignores: [],
26 |       },
27 |     ],
28 |     'vue/order-in-components': ['warn', {
29 |       'order': [
30 |         'el',
31 |         'name',
32 |         'key',
33 |         'parent',
34 |         'functional',
35 |         ['delimiters', 'comments'],
36 |         ['components', 'directives', 'filters'],
37 |         'extends',
38 |         'mixins',
39 |         ['provide', 'inject'],
40 |         'ROUTER_GUARDS',
41 |         'layout',
42 |         'middleware',
43 |         'validate',
44 |         'scrollToTop',
45 |         'transition',
46 |         'loading',
47 |         'inheritAttrs',
48 |         'model',
49 |         ['props', 'propsData'],
50 |         'emits',
51 |         'setup',
52 |         'asyncData',
53 |         'data',
54 |         'fetch',
55 |         'head',
56 |         'computed',
57 |         'watch',
58 |         'watchQuery',
59 |         'LIFECYCLE_HOOKS',
60 |         'methods',
61 |         ['template', 'render'],
62 |         'renderError'
63 |       ]
64 |     }]
65 |   },
66 |   parserOptions: {
67 |     parser: '@babel/eslint-parser',
68 |   },
69 | }
70 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Vue Router Loading
 3 | 
 4 | Easy to use and highly customizable Vue Router Loading.
 5 | 
 6 | ### Getting started  
 7 | 
 8 | 1. Install the package:
 9 | ```shell
10 | npm install vue-router-loading
11 | ```
12 | 
13 | 2. Import component in App.vue:
14 | ```javascript
15 | import VueRouterLoading from 'vue-router-loading'
16 | ```
17 | 
18 | 3. Put component in template
19 | ```html
20 | <vue-router-loading></vue-router-loading>
21 | ```
22 | 
23 | ### ✅ Customize  
24 | 
25 | You can customize loading bar with props.
26 | 
27 | ⚙ color:  
28 | default: #41b883
29 | 
30 | ⚙ height:  
31 | default: 2px
32 | 
33 | ⚙ position:  
34 | default: top  
35 | options: top, bottom
36 | 
37 | ⚙ rtl:  
38 | default: false
39 | 
40 | ⚙ endLineMode:  
41 | default: shadow  
42 | options: shadow, circle
43 | 
44 | ⚙ shadowColor:  
45 | default: #41b883
46 | 
47 | ⚙ shadowOpacity:  
48 | default: 0.9
49 | 
50 | ⚙ circleColor:  
51 | default: #41b883
52 | 
53 | ⚙ showOverly:  
54 | default: true


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-router-loading",
 3 |   "version": "1.1.15",
 4 |   "private": false,
 5 |   "author": "Ahmad Karimzade",
 6 |   "description": "Vue Router Loading Progress Bar",
 7 |   "homepage": "https://github.com/ahmadkzx/vue-router-loading#readme",
 8 |   "main": "./dist/vue-router-loading.common.js",
 9 |   "scripts": {
10 |     "lint": "eslint --ext .vue src/ --fix",
11 |     "build": "vue-cli-service build --target lib --name vue-router-loading ./src/main.js"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git+https://github.com/ahmadkzx/vue-router-loading.git"
16 |   },
17 |   "files": [
18 |     "dist/*"
19 |   ],
20 |   "keywords": [
21 |     "vue",
22 |     "vue-router"
23 |   ],
24 |   "dependencies": {
25 |     "@babel/eslint-parser": "^7.17.0",
26 |     "@vue/eslint-config-prettier": "^7.0.0",
27 |     "core-js": "^3.6.5",
28 |     "eslint": "^8.11.0",
29 |     "eslint-plugin-prettier": "^4.0.0",
30 |     "eslint-plugin-vue": "^8.5.0",
31 |     "vue": "^2.6.11"
32 |   },
33 |   "devDependencies": {
34 |     "@vue/cli-plugin-babel": "~4.5.0",
35 |     "@vue/cli-service": "~4.5.0",
36 |     "node-sass": "^4.12.0",
37 |     "sass-loader": "^8.0.2",
38 |     "vue-template-compiler": "^2.6.11"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/VueRouterLoading.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <Transition name="fade">
  4 |       <div
  5 |         v-if="isStarted"
  6 |         :style="progressBarStyle"
  7 |         :class="[
  8 |           'progressbar',
  9 |           { isPaused: isPaused },
 10 |           { isFinished: isFinished },
 11 |           { rtl: rtl },
 12 |           { showOverly: showOverly }
 13 |         ]"
 14 |       >
 15 |         <span
 16 |           v-if="endLineMode == 'shadow'"
 17 |           class="shadow"
 18 |           :style="shadowStyle"
 19 |         />
 20 |         <span
 21 |           v-else-if="endLineMode == 'circle'"
 22 |           class="circle"
 23 |           :style="circleStyle"
 24 |         />
 25 |       </div>
 26 |     </Transition>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 | export default {
 32 |   name: "VueRouterLoading",
 33 | 
 34 |   props: {
 35 |     color: {
 36 |       default: "#41b883"
 37 |     },
 38 |     height: {
 39 |       default: 2
 40 |     },
 41 |     position: {
 42 |       default: "top"
 43 |     },
 44 |     rtl: {
 45 |       default: false
 46 |     },
 47 |     endLineMode: {
 48 |       default: "shadow"
 49 |     },
 50 |     shadowColor: {
 51 |       default: "#41b883"
 52 |     },
 53 |     shadowOpacity: {
 54 |       default: "0.9"
 55 |     },
 56 |     circleColor: {
 57 |       default: "#41b883"
 58 |     },
 59 |     showOverly: {
 60 |       default: true
 61 |     }
 62 |   },
 63 | 
 64 |   data: () => ({
 65 |     isPaused: false,
 66 |     isStarted: false,
 67 |     isFinished: false
 68 |   }),
 69 | 
 70 |   computed: {
 71 |     progressBarStyle() {
 72 |       return {
 73 |         [this.position]: 0,
 74 |         background: this.color,
 75 |         height: `${this.height}px`
 76 |       };
 77 |     },
 78 | 
 79 |     shadowStyle() {
 80 |       let shadowColor = this.isHex(this.shadowColor)
 81 |         ? this.hexToRgb(this.shadowColor)
 82 |         : this.shadowColor;
 83 |       return {
 84 |         "box-shadow": `0 0 10px rgba(${shadowColor}, ${this.shadowOpacity})`
 85 |       };
 86 |     },
 87 | 
 88 |     circleStyle() {
 89 |       return {
 90 |         background: this.circleColor,
 91 |         width: `${+this.height * 3}px`,
 92 |         height: `${+this.height * 3}px`
 93 |       };
 94 |     }
 95 |   },
 96 | 
 97 |   watch: {
 98 |     isStarted(val) {
 99 |       if (val)
100 |         setTimeout(() => {
101 |           this.$el.addEventListener("animationend", this.destroy);
102 |         }, 500);
103 |     },
104 | 
105 |     $route() {
106 |       setTimeout(() => this.finish(), 500);
107 |     }
108 |   },
109 | 
110 |   mounted() {
111 |     this.$router.beforeEach((from, to, next) => {
112 |       this.start();
113 |       next();
114 |     });
115 |   },
116 | 
117 |   methods: {
118 |     start() {
119 |       if (this.isStarted) this.destroy();
120 |       this.isStarted = true;
121 |       setTimeout(() => {
122 |         if (this.isStarted && !this.isFinished) this.isPaused = true;
123 |       }, 8500);
124 |     },
125 | 
126 |     finish() {
127 |       this.isFinished = true;
128 |       this.isPaused = false;
129 |     },
130 | 
131 |     destroy() {
132 |       this.isStarted = false;
133 |       this.isFinished = false;
134 |       this.isPaused = false;
135 |     },
136 | 
137 |     hexToRgb(hex) {
138 |       var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
139 |       return result
140 |         ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(
141 |             result[3],
142 |             16
143 |           )}`
144 |         : null;
145 |     },
146 | 
147 |     isHex(str) {
148 |       return str.match(/^#[a-f0-9]{6}$/i) !== null;
149 |     }
150 |   }
151 | };
152 | </script>
153 | 
154 | <style lang="scss" scoped>
155 | .fade-enter-active,
156 | .fade-leave-active {
157 |   transition: opacity 0.5s;
158 | }
159 | 
160 | .fade-enter,
161 | .fade-leave-to {
162 |   opacity: 0;
163 | }
164 | 
165 | .progressbar {
166 |   position: fixed;
167 |   width: 0%;
168 |   left: 0;
169 |   z-index: 9999999;
170 |   animation: start 10s linear forwards;
171 | 
172 |   .shadow {
173 |     position: absolute;
174 |     top: 0;
175 |     right: 0;
176 |     width: 30px;
177 |     height: 2px;
178 |   }
179 | 
180 |   .circle {
181 |     position: absolute;
182 |     top: 50%;
183 |     right: 0;
184 |     transform: translateY(-50%);
185 |     border-radius: 50%;
186 |   }
187 | 
188 |   &.showOverly {
189 |     &::after {
190 |       display: none;
191 |       content: "";
192 |       position: absolute;
193 |       top: 0;
194 |       left: 0%;
195 |       width: 30px;
196 |       height: 2px;
197 |       background: white;
198 |       animation: overly 1s linear infinite;
199 |       opacity: 0.6;
200 |     }
201 |   }
202 | 
203 |   &.paused {
204 |     animation-play-state: paused;
205 | 
206 |     &::after {
207 |       display: block;
208 |     }
209 |   }
210 | 
211 |   &.finished {
212 |     animation-play-state: running;
213 |     animation-duration: 1s;
214 | 
215 |     &::after {
216 |       display: none;
217 |     }
218 |   }
219 | 
220 |   @keyframes start {
221 |     from {
222 |       width: 0%;
223 |     }
224 |     to {
225 |       width: 100%;
226 |     }
227 |   }
228 | 
229 |   @keyframes overly {
230 |     from {
231 |       left: 0%;
232 |     }
233 |     to {
234 |       left: 100%;
235 |     }
236 |   }
237 | }
238 | 
239 | .progressbar.rtl {
240 |   left: unset;
241 |   right: 0;
242 | 
243 |   .shadow,
244 |   .circle {
245 |     right: unset;
246 |     left: 0;
247 |   }
248 | 
249 |   &::after {
250 |     left: unset;
251 |     right: 0%;
252 |   }
253 | 
254 |   @keyframes overly {
255 |     from {
256 |       right: 0%;
257 |     }
258 |     to {
259 |       right: 100%;
260 |     }
261 |   }
262 | }
263 | </style>
264 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import VueRouterLoadingComponent from './VueRouterLoading.vue'
2 | export default VueRouterLoadingComponent


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   css: {
3 |     extract: false
4 |   }
5 | }


--------------------------------------------------------------------------------