可以暂停
进度条.vue
<template>
<div :class="['pro',active?'':'loading']">
<div class="cube"></div>
</div>
</template>
<script>
export default {
name: "loading",
props:['active']
}
</script>
<style scoped>
.pro{
background-color: darkblue;
width: 100%;
height:2px;
overflow: hidden;
position: relative;
}
.pro>.cube{
display: none;
background-image: linear-gradient(to right,transparent,cyan );
width: 100px;
height: 2px;
position: absolute;
top: 0;
}
.pro.loading>.cube{
display: block;
animation: ani1 linear infinite forwards 2s;
}
@keyframes ani1 {
from{
left:-100px;
}to{
left: calc(100% + 100px);
}
}
</style>
使用方法:
<loading :active="loading"/>