Optimize progress bar

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.1.7
+### Bug fixes
+- Optimize progress bar
+
 ## 1.1.6
 ### Features
 - Add logo 😂

src/render.js

@@ -114,8 +114,8 @@ export function renderSidebar (content) {
  * render loading bar
  * @return {[type]} [description]
  */
-export function renderLoading ({ loaded, total }) {
-  const num = Math.floor(loaded / total * 100)
+export function renderLoading ({ loaded, total, step }) {
+  let num
 
   if (!CACHE.loading) {
     const div = document.createElement('div')
@@ -124,13 +124,19 @@ export function renderLoading ({ loaded, total }) {
     document.body.appendChild(div)
     CACHE.loading = div
   }
+  if (step) {
+    num = parseInt(CACHE.loading.style.width, 10) + step
+    num = num > 80 ? 80 : num
+  } else {
+    num = Math.floor(loaded / total * 100)
+  }
 
   CACHE.loading.style.opacity = 1
   CACHE.loading.style.width = num >= 95 ? '100%' : num + '%'
 
   if (num >= 95) {
-    clearTimeout(renderLoading.cacheTImeout)
-    renderLoading.cacheTImeout = setTimeout(_ => {
+    clearTimeout(renderLoading.cacheTimeout)
+    renderLoading.cacheTimeout = setTimeout(_ => {
       CACHE.loading.style.opacity = 0
       CACHE.loading.style.width = '0%'
     }, 200)

src/util.js

@@ -14,8 +14,14 @@ export function load (url, method = 'GET', loading) {
   return {
     then: function (success, error = function () {}) {
       if (loading) {
+        const id = setInterval(_ =>
+          loading({ step: Math.floor(Math.random() * 5 + 1) }),
+        500)
         xhr.addEventListener('progress', loading)
-        xhr.addEventListener('loaded', loading)
+        xhr.addEventListener('loadend', evt => {
+          loading(evt)
+          clearInterval(id)
+        })
       }
       xhr.addEventListener('error', error)
       xhr.addEventListener('load', ({ target }) => {