<template>
<div class="progress">
<div class="g-progress" :style="{ width: `${percent}%` }"><div class="masker"> </div></div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, nextTick } from 'vue'
const percent = ref(0)
let time
time = setInterval(() => {
percent.value += 10
if (percent.value >= 100) clearInterval(time)
}, 500)
</script>
<style lang="scss" scoped>
.progress-page {
position: relative;
width: 100vw;
background-image: url('xxxxxx');
background-size: cover;
border-radius: 10%;
padding: 30rpx;
.title {
font-size: 32rpx;
color: rgba(51, 51, 51, 1);
}
.tip {
margin-top: 10rpx;
font-size: 24rpx;
color: rgba(102, 102, 102, 1);
}
.progress {
margin-top: 36rpx;
width: 100%;
height: 24rpx;
border-radius: 50rpx;
background: #ffffff;
.g-progress {
position: relative;
width: 30%;
height: inherit;
border-radius: 50rpx;
background: linear-gradient(-45deg, #f67b59 36%, #f89479 28%, #f89479 67%, #f67b59 25%);
background-size: 24px 12px;
transition: width 0.5s ease-in-out;
}
.g-progress::after {
position: absolute;
top: -12rpx;
right: -32rpx;
content: '';
width: 100rpx;
height: 44rpx;
display: block;
background-image: url('xxxxxxx');
background-size: cover;
}
.masker {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.4;
border-radius: 50rpx;
background: linear-gradient(45deg, #f67f5a 0%, #f3242b 100%);
}
}
}
.button {
position: absolute;
top: 44rpx;
right: 60rpx;
width: 100rpx;
height: 52rpx;
border: 1rpx solid rgba(153, 153, 153, 1);
border-radius: 26rpx;
font-size: 24rpx;
color: rgba(153, 153, 153, 1);
display: flex;
justify-content: center;
align-items: center;
}
</style>
使用css 实现渐变色条纹丝滑进度条
最新推荐文章于 2024-07-19 15:32:49 发布