实现环形进度条

爱吃栗子的小单

于 2020-03-16 19:19:08 发布

阅读量204

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序 css

本文链接：https://blog.youkuaiyun.com/weixin_40820061/article/details/104905931

微信小程序同时被 2 个专栏收录

7 篇文章

订阅专栏

css

2 篇文章

订阅专栏

本文详细解析了一种基于Web的旋转进度条样式实现方法，通过使用CSS和HTML结合动态属性，实现了进度条的左右旋转效果，同时介绍了关键帧动画的应用。

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

<view class="circleProgress_wrapper">
     <view class="text">{{proText}}</view>
     <view class="wrapper right">
         <view class="circleProgress rightcircle" style="transform: rotate({{rightProgress}}deg)"></view>
     </view>
     <view class="wrapper left">
         <view class="circleProgress leftcircle" style="transform: rotate({{leftProgress}}deg)"></view>
     </view>
 </view>

.circleProgress_wrapper{
  	width: 100rpx;
    height: 100rpx;
    position: relative;
    .text{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
    }
    .wrapper{
        width: 50rpx;
        height: 100rpx;
        position: absolute;
        top: 0;
        overflow: hidden;
    }
    .left{
        left: 0;
    }
    .right{
        right: 0;
    }
    .circleProgress{
        width: 90rpx;
        height: 90rpx;
        border: 5rpx solid transparent;
        border-radius: 50%;
        position: absolute;
        top: 0;
    }
    .rightcircle{
        border-top: 5rpx solid #04C15F;
        border-right: 5rpx solid #04C15F;
        right: 0;
        animation: ani_right 5s linear infinite ;
    }
    .leftcircle{
        border-bottom: 5rpx solid #04C15F;
        border-left: 5rpx solid #04C15F;
        left: 0;
        animation: ani_left 5s linear infinite ;
    }
    @keyframes ani_right {
        0%{
            transform: rotate(-135deg);
        }
        50%,100%{
            transform: rotate(45deg);
        }
    }
    @keyframes ani_left {
        0%,50%{
            transform: rotate(-135deg);
        }
        100%{
            transform: rotate(45deg);
        }
    }
}