使用css 实现渐变色条纹丝滑进度条_css条纹进度条-优快云博客

本文链接：https://blog.youkuaiyun.com/PhoenixGuangyu/article/details/136469758

该篇文章介绍了如何使用Vue.js和CSS实现一个动态的百分比进度条，通过JavaScript定时器更新进度并控制动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>