CSS 加载器Loaders

CSS加载器是用于指示网页加载过程的动画效果。它们使用CSS实现，并可应用于网页上的各种元素，如旋转器或进度条。CSS加载器通常用于通过视觉方式指示内容正在加载或处理，从而改善用户体验。

以下是用于创建加载器的几个CSS属性：

border : 用于指定加载器边框的大小和颜色。
border-radius : 用于指定加载器的形状。例如：border-radius:50%可以将加载器变成圆形。
border-top、border-bottom、border-left和/或border-right : 用于指示加载器的旋转方向。
width : 用于指定加载器的宽度。
height : 用于指定加载器的高度。
animation : 用于指定加载器旋转所需的时间。
@keyframes : @keyframes规则用于指定动画规则。它可以包含关键词from和to，分别表示0%和100%；其中0%表示动画的开始，100%表示动画的结束。
transform : transform函数用于指定加载器的旋转角度。
mask/mask-composite : 用于创建加载器的最终形状。

在代码中为不支持animation和transform属性的浏览器添加 -webkit- 前缀。

示例

这是一个使用CSS创建加载器的示例：

<html>
<head>
<style>
   .loader-test {
      border: 20px solid #110101;
      border-radius: 60%;
      border-top: 20px solid #f10c18;
      border-right: 20px solid yellow;
      border-bottom: 20px solid blue;
      border-left: 20px solid green;
      width: 50px;
      height: 50px;
      -webkit-animation: spin 5s linear infinite;
      animation: spin 5s linear infinite;
   }
   @keyframes spin {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
   }
</style>
</head>
<body>
   <h2>CSS Loader</h2>
   <div class="loader-test"></div>
</body>
</html>

下面是使用一个边框简写属性 border-right 创建加载器的示例：

<html>
<head>
<style>
   .loader-test {
      border: 20px solid #110101;
      border-radius: 60%;
      border-right: 20px solid red;
      width: 50px;
      height: 50px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
   }
   @keyframes spin {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
   }
</style>
</head>
<body>
   <h2>CSS Loader</h2>
   <div class="loader-test"></div>
</body>
</html>

下面是使用:before和:after属性创建加载器的示例：

<html>
<head>
<style>
   .loader-test {
      width: 100px; /* control the size */
      aspect-ratio: 1;
      -webkit-mask: conic-gradient(red, yellow, green);
            mask: conic-gradient(red, yellow, green);
      animation: spin 2s steps(12) infinite;
   }
   .loader,
   .loader:before,
   .loader:after{
      background: conic-gradient(red, yellow, green);
   }
   .loader:before,
   .loader:after{
      content: "";
      transform: rotate(30deg);
   }
   .loader:after{
      transform: rotate(60deg);
   }
   @keyframes spin {
      from {transform: rotate(0turn)}
      to   {transform: rotate(1turn)}
   }
   div {
      margin: 20px;
      width: 100px;
      height: 100px;
      place-content: center;
      place-items: center;
   }
</style>
</head>
<body>
   <h2>CSS Loader</h2>
   <div class="loader-test">
</div>
</body>
</html>

始终同时指定0％和100％的选择器，以获得最佳的浏览器支持。

以下是创建加载器的示例：

<html>
<head>
<style>
   .loader-test {
      width: 50px;
      padding: 10px;
      aspect-ratio: 1;
      border-radius: 50%;
      margin: 20px;
      height: 50px;
      background: linear-gradient(10deg,#ccc,red);
      -webkit-mask: conic-gradient(#0000,#000), linear-gradient(#000 0 0) content-box;
            mask: conic-gradient(#0000,#000), linear-gradient(#000 0 0) content-box;
      -webkit-mask-composite: source-out;
            mask-composite: subtract;
      animation: load 1s linear infinite;
   }

   @keyframes load {
      to{transform: rotate(1turn)}
   }
</style>
</head>
<body>
   <h2>CSS Loader</h2>
   <div class="loader-test"></div>
</body>
</html>

有无数种通过CSS创建的加载动画。