CSS - 加载器

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

CSS 的以下属性很少可用于创建加载器：

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

对于不支持动画和变换属性的浏览器，您需要在代码中添加-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 创建无数种加载器。