diff --git a/CHANGELOG.md b/CHANGELOG.md index 15f1abbb..3d7e4a7e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## 1.1.7 +### Bug fixes +- Optimize progress bar + ## 1.1.6 ### Features - Add logo 😂 diff --git a/src/render.js b/src/render.js index fe998943..61740d88 100644 --- a/src/render.js +++ b/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) diff --git a/src/util.js b/src/util.js index c93b5888..94521dde 100644 --- a/src/util.js +++ b/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 }) => {