less使图片一直旋转

最新推荐文章于 2024-07-20 19:09:44 发布

Michael_Cheng_09

最新推荐文章于 2024-07-20 19:09:44 发布

阅读量116

点赞数

文章标签： less 前端 css

本文链接：https://blog.csdn.net/zihang_cheng/article/details/127604327

版权

const renderFileStatus = (data) => {
  switch (data.status) {
    case 'uploading':
      return (
        <div className={css.status}>
          <img src={Uploading} style={{ float: 'left' }} className={css.loading_icon} />
          <span className={css.status_text}>{`上传${data.percent.toFixed(2)}%...`}</span>
        </div>
      );

.loading_icon {
        /* //数值越大，转速越缓慢（30s） */
        animation: rotate 1s linear infinite;

        @keyframes rotate {
          0% {
            -webkit-transform: rotate(0deg);
          }

          25% {
            -webkit-transform: rotate(90deg);
          }

          50% {
            -webkit-transform: rotate(180deg);
          }

          75% {
            -webkit-transform: rotate(270deg);
          }

          100% {
            -webkit-transform: rotate(360deg);
          }
        }
      }