vue實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條效果
本文實(shí)例為大家分享了vue實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條效果的具體代碼,供大家參考,具體內(nèi)容如下
演示效果:
結(jié)構(gòu)
progress/index.js
const controller = { init: require('./controllers/html'), speed: require('./controllers/speed') } exports.init = controller.init exports.speed = controller.speed
progress/controllers/html/index.js
exports.set = () => { let dom = document.createElement('div') dom.setAttribute('id', 'progress_speed') dom.classList.add('progress-box', 'progress-hide') dom.innerHTML = '<div class="progress progress-speed-hide" id="progress_box_speed"><div class="speed" style="width:0%;background: #f2f3f5;transition: 0.2s;"></div></div>' document.getElementById('app').insertBefore(dom, document.getElementById('app').firstChild) let Style = ` .progress-box{ width: 100%; height: 100%; transition: 0.4s; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.5); z-index:4002; } .progress { border-radius: 19px; background: #f2f3f5; width: 80%; height: 38px; position: fixed; top: calc(50% - 19px); left: calc(50% - 40%); z-index:2000; transition: 0.4s; opacity: 1; } .progress-hide{ border-radius: 19px; width: 0%; height: 0%; top: calc(50% - 0%); left: calc(50% - 0%); transition: 0.2s; overflow: hidden; } .progress-speed-hide{ width: 0%; height: 0px; transition: 0.6s; opacity: 0; overflow: hidden; } .speed { border-radius: 19px; background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); height: 38px; -webkit-background-size: 40px 40px; background-size: 40px 40px width: 0%; transition: 0.3s; background-color:#409EFF; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; } .speed-success{ width: 100%; background-color: #67c23a; } @-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0 } to { background-position: 0 0 } } @-o-keyframes progress-bar-stripes { from { background-position: 40px 0 } to { background-position: 0 0 } } @keyframes progress-bar-stripes { from { background-position: 40px 0 } to { background-position: 0 0 } }` let styleElement = document.getElementById('progress') if (!styleElement) { styleElement = document.createElement('style') styleElement.type = 'text/css' styleElement.id = 'progress' document.getElementsByTagName('head')[0].appendChild(styleElement) styleElement.appendChild(document.createTextNode(Style)) } }
progress/controllers/speed/index.js
exports.run = (time) => { document.getElementById('progress_speed').classList.remove('progress-hide') time = time * 100 let dom = document.getElementById('progress_box_speed') dom.classList.remove('progress-speed-hide') dom.getElementsByClassName('speed')[0].classList.remove('speed-success') setTimeout(() => { dom.getElementsByClassName('speed')[0].setAttribute('style', 'width:' + time + '%') }, 10) if (time >= 100) { setTimeout(() => { dom.getElementsByClassName('speed')[0].classList.add('speed-success') dom.getElementsByClassName('speed')[0].setAttribute('style', 'width:100%') dom.classList.add('progress-speed-hide') setTimeout(() => { document.getElementById('progress_speed').classList.add('progress-hide') dom.getElementsByClassName('speed')[0].setAttribute('style', 'width:0%') }, 900) }, 1000) } }
如何使用?
main.js中導(dǎo)入(根據(jù)你自己新建文件的路徑為基準(zhǔn),這是我自己的路徑)
import progress from './common/progress'
全局掛載
Vue.prototype.$progress = progress
結(jié)構(gòu)
使用:
this.$progress.init.set() this.$progress.speed.run('10.555555') // 這樣進(jìn)度條就走到10.555555%了
進(jìn)度條走到100之后,會(huì)自動(dòng)隱藏!可以全局掛載,然后各種需要進(jìn)度條的地方再使用!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue通過(guò)moment插件實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天
這篇文章主要介紹了Vue 結(jié)合插件moment 實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10vue在標(biāo)簽中如何使用(data-XXX)自定義屬性并獲取
這篇文章主要介紹了vue在標(biāo)簽中如何使用(data-XXX)自定義屬性并獲取,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08Vue mixin實(shí)現(xiàn)組件功能復(fù)用示例詳解
這篇文章主要為大家介紹了Vue mixin實(shí)現(xiàn)組件功能復(fù)用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10vue項(xiàng)目啟動(dòng)端口更改的實(shí)現(xiàn)
在Vue前端項(xiàng)目中,可以通過(guò)修改配置文件來(lái)指定啟動(dòng)的端口號(hào),本文就來(lái)介紹 一下vue項(xiàng)目啟動(dòng)端口更改的實(shí)現(xiàn),感興趣的可以了解一下2023-10-10el-table樹形數(shù)據(jù)序號(hào)排序處理方案
這篇文章主要介紹了el-table樹形數(shù)據(jù)序號(hào)排序處理方案,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-03-03手把手教你如何使用Vite構(gòu)建vue項(xiàng)目
這篇文章主要介紹了如何使用Vite構(gòu)建vue項(xiàng)目的相關(guān)資料,本文主要介紹了Vite構(gòu)建Vue項(xiàng)目的詳細(xì)步驟,包括檢查node.js和pnpm的安裝,構(gòu)建Vite+Vue項(xiàng)目,利用HBuilderX導(dǎo)入項(xiàng)目,需要的朋友可以參考下2024-10-10vue利用openlayers實(shí)現(xiàn)動(dòng)態(tài)軌跡
這篇文章主要為大家介紹了vue利用openlayers實(shí)現(xiàn)動(dòng)態(tài)軌跡,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11