I first saw the page loading progress bar on youtube, and I can see it on almost all major websites later, so that users will not stare at completely blank pages when loading the page, improving user experience
However, from a development perspective, this progress bar is indeed difficult to grasp in terms of authenticity, because we cannot count the progress until the logical code is loaded, and the progress of the logical code itself cannot count. In addition, it is impossible for us to monitor the loading of all resources.
In fact, users do not care about how many percent of your page is loaded, but what they really care about is how long it will be before loading, whether this blank page has not been loaded, or whether it is blank after loading. So we don't need to "simulate" a progress bar, and use a fake animation effect to simulate loading before the backend data is returned, and read the progress bar and hide it after the data is returned.
//
<template>
<transition name="fade">
<div class="progress-bar" v-if="isShow">
</div>
</transition>
</template>
<script type="text/babel">
export default {
data() {
return {
isShow: true, // Whether to display the progress bar val: 0, // Progress }
},
props: {
/**
* Self-increase every 10 milliseconds
*/
step: {
type: Number,
default: 5,
},
/**
* Initial value
*/
initVal: {
type: Number,
default: 0,
},
/**
* Stop at a certain progress
*/
stopVal: {
type: Number,
default: 80,
},
/**
* Progress bar continues to success
*/
isOk: {
type: Boolean,
default: false,
},
},
mounted() {
// The loading progress after initialization, the loading percentage is determined by stopVal =
let step =
let timer = setInterval(() => {
= + step
this.$ = + '%'
// The progress bar reaches the maximum percentage value of stopVal before the parent component data is loaded if ( >= ) {
clearInterval(timer)
return
}
}, 10)
},
watch: {
/**
* Listen to component props changes to determine whether to continue loading. Generally, this flag bit is changed after the parent component data is loaded.
*/
isOk() {
let val =
let step =
let timer = setInterval(() => {
val = val + step
this.$ = val + '%'
// Loading to 100% complete if (val >= 100) {
// Turn off the timer clearInterval(timer)
// Close the progress bar after loading = false
// Completed callback this.$emit('callback', 'load success')
return
}
}, 10)
},
},
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
.progress-bar {
position fixed
top 0
height 6px
width 0
background-color #999
}
.fade {
&-enter-active, &-leave-active {
transition: all .3s
}
&-enter, &-leave-active {
opacity: 0
}
}
</style>
The above example of the vue page loading progress bar component is all the content I share with you. I hope you can give you a reference and I hope you can support me more.