css测试动画进度条单次

css测试动画进度条单次

 <div onClick={this.judgeProgressClick}>判断打开进度条</div>
 <AnimationProgress>
    <div className="animation-axis" style={{ animation: judgeAnimationProgress ? "progressAnimate 8s linear" : "unset" }} />
  </AnimationProgress>

样式

export const AnimationProgress = styled.div`
  width: 100%;
  height: 6px;
  padding: 1px;
  background-color: rgba(0, 218, 255, 0.2);
  @keyframes progressAnimate {
    from { width: 0;}
    to { width: 100%; }
  }
  .animation-axis{
    height: 4px;
    display: inline-block;
    width: 100%;
    background-color: rgb(0, 218, 255);
  }
`;