vue+js +css动态加载进度条

最新推荐文章于 2024-04-30 09:57:08 发布

yvonne莫

最新推荐文章于 2024-04-30 09:57:08 发布

阅读量213

点赞数 2

文章标签： javascript vue.js css

本文链接：https://blog.csdn.net/qq_22475399/article/details/136656542

版权

在这里插入图片描述

html部分

	<div class="scoreWapper">
		<div class="scoreSlider">
			<div class="scoreSliderBar" :style="'width:'+scoreNum+'%'"></div>
		</div>
		<div class="scoreWapperList">加载中（{{scoreNum}}%）</div>
	</div>

css部分

.scoreWapper{
				width: 80%;
				.scoreSlider{
					width: 100%;
					height:10px;
					background-color:rgba(255, 255, 255, 0.3);
					border-radius: 20px;
					.scoreSliderBar{
						height:10px;
						background-color:rgba(255, 255, 255,1);
						border-radius: 20px;
					}
				}
				.scoreWapperList{
					margin-top:10px;
					font-size: 13px;
					color:#fff;
				}
}

js 部分

methods: {
		//加载速度
		getLoading(){
			let totla=0;
			let timer=setInterval(()=>{
				totla++;
				if (t < 101) {
						this.scoreNum=totla
					}
					// if (totla == 100) console.log("已到最大长度：清除定时器");
					if (totla == 100) {
						clearInterval(timer)
					}
			},100)
		},
}