使用 CSS 的简单加载动画

CSS

大家好，在本文中，我们将使用简单的 CSS创建加载动画。

看看我们正在设计什么

HTML

这是该项目最简单的部分。

<body>
    <div class="loader"></div>
</body>

HTML 就是这样。

CSS

将装载机对准中心

 body{
            display: grid;
            place-items: center;
            height: 90vh;
        }

现在设置 Loader 的样式

        .loader {
  border: 10px solid #f3f3f3; 
  border-top: 10px solid #3498db; 
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 1s linear infinite;
}

现在添加keyframes加载器动画


@keyframes spin {
  0% { transform: rotate(0deg);
       border-top: 10px solid blue;
}
    25%{transform: rotate(90deg);
        border-top: 10px solid green;

    }
    50%{transform: rotate(180deg);
        border-top: 10px solid yellow;
    }
    75%{transform: rotate(270deg);
        border-top: 10px solid red;
    }

  100% { transform: rotate(360deg);
        border-top: 10px solid blue;    
}
}

我们想要的加载器动画已经准备好了。

如果您喜欢它♥，那么请表达一些爱意。

鏂囩珷鏉ユ簮锛�https://dev.to/devrohit0/simple-loader-animation-with-css-3e4n