vue實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條效果
更新時(shí)間：2021年09月16日 15:02:13 作者：qq_42289686
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(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修飾符v-model及.sync原理及區(qū)別詳解
這篇文章主要為大家介紹了vue修飾符v-model及.sync原理及使用區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue data恢復(fù)初始化數(shù)據(jù)的實(shí)現(xiàn)方法
今天小編就為大家分享一篇vue data恢復(fù)初始化數(shù)據(jù)的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了vue中使用axios固定url請(qǐng)求前綴的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue elementUI實(shí)現(xiàn)拖拽流程圖效果
這篇文章主要為大家詳細(xì)介紹了如何通過vue elementUI實(shí)現(xiàn)拖拽流程圖效果,不引入插件,純手寫實(shí)現(xiàn),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-01-01
組件是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展HTML元素,封裝可重用的代碼,下面這篇文章主要給大家介紹了關(guān)于vue如何動(dòng)態(tài)加載組件的相關(guān)資料,需要的朋友可以參考下2022-10-10
vue 雙向數(shù)據(jù)綁定的實(shí)現(xiàn)學(xué)習(xí)之監(jiān)聽器的實(shí)現(xiàn)方法
這篇文章主要介紹了vue 雙向數(shù)據(jù)綁定的實(shí)現(xiàn)學(xué)習(xí)之監(jiān)聽器的實(shí)現(xiàn)方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
vue實(shí)現(xiàn)todolist單頁(yè)面應(yīng)用
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)todolist單頁(yè)面應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
Vue3使用video-player實(shí)現(xiàn)視頻播放
video-player是一個(gè)基于video.js的視頻播放器組件,本文主要介紹了Vue3使用video-player實(shí)現(xiàn)視頻播放,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
vue實(shí)現(xiàn)ajax滾動(dòng)下拉加載，同時(shí)具有l(wèi)oading效果(推薦)
這篇文章主要介紹了vue實(shí)現(xiàn)ajax滾動(dòng)下拉加載，同時(shí)具有l(wèi)oading效果的實(shí)現(xiàn)代碼，文章包括難點(diǎn)說明，介紹的非常詳細(xì)，感興趣的朋友參考下2017-01-01
這篇文章主要介紹了教你用Cordova打包Vue項(xiàng)目的方法，詳細(xì)的介紹了如何Vue項(xiàng)目打包成app，具有一定的參考價(jià)值，有興趣的可以了解一下2017-10-10