水球展示——微信小程序

html 

     
        
          完成率{{list.finish}}%
        
        
          
          
          
          
        
      

 less

// 水球样式
.water {
  margin-top: 20rpx;
  border: 2px solid #45affa;
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  overflow: hidden;
  position: relative;

  // 球内文字
  .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 1;
    text-align: center;
    color: rgb(255, 123, 0);
  }
// 波浪
  .img {
    display: flex;
    justify-content: start;
    width: 300%;
    background-color: #0096ff;
    //控制完成率显示 定义到行内样式动态修改
    height: 1%;
    position: absolute;
    bottom: 0;
    animation: water 2s linear infinite;

    image {
      width: 100%;
      height: 20rpx;
    }
  }
}

// 水波动画
@keyframes water {
  0% {
    transform: translateX(-300rpx);
  }

  100% {
    transform: translateX(-0rpx);
  }
}

js

获取数据赋值就行