前端进度条动画（自定义颜色）

最新推荐文章于 2024-08-29 14:52:10 发布

位攀杰

最新推荐文章于 2024-08-29 14:52:10 发布

阅读量613

点赞数

本文链接：https://blog.csdn.net/feywej/article/details/120769040

版权

前端进度条动画（自定义

代码如下（示例）：

<template>
	<view class="flex-cen">
		<view class="progress candy">
			<view class="progress-bar" :style="{width: Width+'%'}"></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			Width:80 //进度百分比0~100
		};
	}
};
</script>

<style>
.progress {
	margin-top: 100rpx;
    position: relative;
    z-index: 5;
    background: #0000000F;
}

.progress,
.progress-bar {
    width: 610rpx;
    height: 10rpx;
	border-radius: 8rpx;
}


// 进度条动画
.progress.candy .progress-bar {
    background-color: #FF9100FF;
    /* box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.3) inset; */
    background-image: linear-gradient(
		-45deg, 
		rgba(255, 83, 0, 1) 25%, 
		rgba(255, 255, 255, 0) 25%, 
		rgba(255, 255, 255, 0) 50%, 
		rgba(255, 83, 0, 1) 50%, 
		rgba(255, 83, 0, 1) 75%, 
		rgba(255, 255, 255, 0) 75%, 
		rgba(255, 255, 255, 0));
    background-repeat: repeat-x;
    background-size: 20px 20px;
    -webkit-animation: candystripe 1s linear infinite;
    -moz-animation: candystripe 1s linear infinite;
    animation: candystripe 1s linear infinite;
}

@-webkit-keyframes candystripe {
    to {
        background-position: 20px 0;
    }
}

@-moz-keyframes candystripe {
    to {
        background-position: 20px 0;
    }
}

@keyframes candystripe {
    to {
        background-position: 20px 0;
    }
}
</style>