分享10个纯 CSS 实现的 Loading 效果

在网页加载时，为了让用户有更好的使用体验，会显示一个加载效果，这就是Loading效果，而今天我们要分享的是纯CSS实现的10个Loading效果，让你的网页在加载时更加美观。

1. 多彩泡泡

第一个Loading效果是多彩泡泡，看起来非常有趣。

HTML代码

<div class='bubble-container'>

   <div class='bubble'></div>
   <div class='bubble'></div>
   <div class='bubble'></div>
   <div class='bubble'></div>
   <div class='bubble'></div>
</div>

CSS代码

<style>

   .bubble-container {
      width: 300px;
      height: 300px;
      position: relative;
      margin: 0 auto;
   }
   .bubble{
      width: 50px;
      height: 50px;
      position: absolute;
      background-color: #00bcd4;
      border-radius: 50%;
      animation: bubble 2.5s infinite ease-in-out;
   }
   .bubble:nth-child(1){
      top:0;
      left:0;
      animation-delay: 0s;
   }
   .bubble:nth-child(2){
      top:0;
      left:50%;
      transform: translateX(-50%);
      animation-delay: 0.5s;
   }
   .bubble:nth-child(3){
      top:0;
      right:0;
      animation-delay: 1s;
   }
   .bubble:nth-child(4){
      bottom:0;
      left:0;
      animation-delay: 1.5s;
   }
   .bubble:nth-child(5){
      bottom:0;
      right:0;
      animation-delay: 2s;
   }
   @keyframes bubble{
      0%,
      100% {
         transform: scale(0) translateY(0);
         opacity: 1;
      }
      25% {
         transform: scale(1.5) translateY(0);
         opacity: 0.5;
      }
      50% {
         transform: scale(2) translateY(-50%);
         opacity: 0;
      }
      75%{
         transform: scale(1.5) translateY(-100%);
         opacity: 0.5;
      }
   }
</style>

首先，我们创建一个 `bubble-container` 容器，其内部包含5个 `bubble` 元素，每个元素代表一个泡泡。我们使用 `nth-child()` 伪类将泡泡放置在不同的位置，并调整动画延迟，以创建同步动画效果。

随后，我们创建 `@keyframes` 动画效果。在动画的不同时间点上，使用 `transform` 和 `opacity` 属性来实现放大、移动和淡出的效果。

2. 翻滚吧！球球

第二个Loading效果是翻滚的球球，看起来像是一个单独的球在滚动。

HTML代码

<div class='ball-container'>

   <div class='ball'></div>
</div>

CSS代码

<style>

   .ball-container {
      width: 100px;
      height: 100px;
      position: relative;
      margin: 0 auto;
   }
   .ball{
      width: 50px;
      height: 50px;
      position: absolute;
      border-radius: 50% 50% 0 50%;
      transform: rotate(-45deg);
      animation: ball 0.8s infinite ease-in-out;
      background-color: #00bcd4;
      box-shadow: 0 0 15px #00bcd4;
   }
   @keyframes ball{
      from {
         transform: rotate(-45deg) translate(0, 0);
         border-radius: 50% 50% 0 50%;
      }
      to {
         transform: rotate(-405deg) translate(0, 0);
         border-radius: 50%;
      }
   }
</style>

我们首先创建一个 `ball-container` 容器，内部包含一个 `ball` 元素，然后对 `ball` 元素的样式进行调整，设置 `border-radius` 属性，使其呈现出半圆的形状，在 `transform` 属性中设置旋转角度，让球旋转。

然后，我们使用 `@keyframes` 创建动画效果，使用 `from` 和 `to` 进行设置不同的变化效果，让球旋转、放大，最终呈现翻滚的效果。

3. 旋转的齿轮

第三个Loading效果是旋转的齿轮，看起来非常简洁，但却有着不同凡响的效果。

HTML代码

<div class='gear-container'>

   <div class='gear'></div>
</div>

CSS代码

<style>

   .gear-container {
      width: 100px;
      height: 100px;
      position: relative;
      margin: 0 auto;
   }
   .gear{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #00bcd4;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -20px;
      margin-left: -20px;
      animation: gear-rotate 1s infinite linear;
      &:before{
         content: "";
         height: 60%;
         width: 10%;
         background-color: #fff;
         position: absolute;
         left: 45%;
         top: 0;
         transform: rotate(45deg);
         border-radius: 100px 0 0 0;
      }
      &:after{
         content: "";
         height: 60%;
         width: 10%;
         background-color: #fff;
         position: absolute;
         right: 45%;
         top: 0;
         transform: rotate(-45deg);
         border-radius: 100px 0 0 0;
      }
   }
   @keyframes gear-rotate{
      to {
         transform: rotate(360deg);
      }
   }
</style>

我们创建了一个 `gear-container` 容器，内部包含一个 `gear` 元素，我们使用 `border-radius` 属性将元素呈现出圆球的形状，使用 `position` 属性将元素设置为绝对定位，并将其放置在容器中心。

随后，我们使用 `::before` 和 `::after` 伪元素创建出齿轮的齿，通过旋转让“齿”呈现出斜向的状态，构造出齿轮的形状。

最后，我们创建 `@keyframes` 渐变动画，让齿轮旋转起来，使用它的 `linear` 函数实现匀速旋转。

4. 方块缩放

第四个Loading效果是方块缩放，看起来非常简单，但有着不易察觉的动画效果。

HTML代码

<div class='square-container'>

   <div class='square'></div>
</div>

CSS代码

<style>

   .square-container {
      width: 100px;
      height: 100px;
      position: relative;
      margin: 0 auto;
   }
   .square{
      width: 40px;
      height: 40px;
      background-color: #00bcd4;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: square-scale 1s infinite ease-in-out;
   }
   @keyframes square-scale{
      0%,
      100% {
         transform: scale(1, 1);
      }
      50% {
         transform: scale(1.5, 0.5);
      }
   }
</style>

我们首先创建了一个 `square-container` 容器，并放入一个 `square` 元素，将 `square` 元素定位到了容器的中心。

然后，我们为元素创建了 `@keyframes` 渐变动画，使用 `transform` 属性来实现缩放效果。我们通过变换元素的尺寸、形状，让其在不同的时间段呈现出不同的状态。当元素从小到大、由大到小，实现了精细的缩放效果。

5. 圆形进度条

第五个Loading效果是圆形进度条，它是一种表示指示器进度的常用方式。

HTML代码

<div class='circle-container'>

   <div class='circle-wrapper'>
      <div class='circle-left half-circle'></div>
      <div class='circle-right half-circle'></div>
      <div class='circle-inner'>
         <p>75</p>
         <span>%</span>
      </div> 
   </div> 
</div>

CSS代码

<style>

   .circle-container {
      width: 100px;
      height: 100px;
      position: relative;
      margin: 0 auto;
   }
   .circle-wrapper{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 80%;
      height: 80%;
      border-radius: 50%;
      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      &:before{
         content: "";
         position: absolute;
         z-index: 1;
         top: 0;
         left: 50%;
         transform: translateX(-50%);
         width: 40%;
         height: 100%;
         background-color: #00bcd4;
      }
   }
   .circle-left,
   .circle-right {
      width: 50%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 50%;
      transform-origin: left;
      border-radius: 0 100% 100% 0;
      background-color: #fff;
      &:after{
         content: "";
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translateX(-50%) translateY(-50%);
         width: 80%;
         height: 80%;
         background-color: #00bcd4;
         border-radius: 50%;
      }
   }
   .circle-right{
      z-index: 2;
      transform-origin: right;
    }
   .circle-inner{
      position: absolute;
      z-index: 3;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      >p{
         font-size: 16px;
         color: #00bcd4;
         margin: 0;
      }
      >span{
         font-size: 10px;
         color: #00bcd4;
      }
   }
</style>

首先，我们在容器中创建了一个 `circle-wrapper` 元素，我们将其调整为圆形，并设置占 80% 的空间，创建容器。

随后，我们使用 `:before` 伪元素创建进度条的起点和结束点，在 `circle-left` 和 `circle-right` 中，我们将元素调整为半圆形，并使用 `transform-origin` 属性将其中一个元素的旋转点改为右侧，拉伸使其比容器小一点，构造出进度条。

然后，我们使用 `:after` 伪元素，在半圆上呈现出一个圆形形状，为其填充颜色，以突出显示进度条的颜色。

最后，我们在 `circle-inner` 元素中，使用 `transform` 属性将其移动到中心位置，放置显示文字。

6. 移动的波浪

第六个Loading效果是移动的波浪，它的波动效果非常有趣，同时它也是一种表示数据传输等待的效果。

HTML代码

<div class='wave-container'>

   <div class='wave wave1'></div>
   <div class='wave wave2'></div>
   <div class='wave wave3'></div>
</div>

CSS代码

<style>

   .wave-container {
      width: 100px;
      height: 50px;
      position: relative;
      margin: 0 auto;
      overflow: hidden;
   }
   .wave {
      width: 200px;
      height: 50px;
      position: absolute;
      background-color: rgba(0, 188, 212, 0.2);
      border-radius: 100% / 50%;
      opacity: 0.8;
      transform: rotate(45deg);
      animation: wave-move 2s infinite;
   }
   .wave1{
      left: -25%;
      bottom: 0;
      animation-delay: -0.2s;
   }
   .wave2{
      left: -25%;
      bottom: 0;
      animation-delay: -0.4s;
   }
   .wave3{
      left: -25%;
      bottom: 0;
      animation-delay: -0.6s;
   }
   @keyframes wave-move {
      0% {
         transform: translateX(0) rotate(45deg);
      }
      100% {
         transform: translateX(50%) rotate(45deg);
      }
   }
   @keyframes wave-height {
      0%,
      100% {
         height: 50px;
      }
      50% {
         height: 0;
      }
   }
</style>

我们首先创建一个 `wave-container` 容器，然后在其中创建一个 `wave` 元素，使用 `border-radius` 属性将其调整为50%的半圆形大幅度淡化边框，使其成为波浪形状，并设置 `opacity` 属性，为波浪添加半透明效果，更真实的效果。

随后，我们使用 `:nth-child()` 伪类，为它添加动画效果，使用 `animation-delay` 属性，为每层波浪设置不同的延迟时长，来实现波浪的上下移动效果，并在 `@keyframes wave-move` 中为其设置旋转效果。

最后，我们在 `@keyframes wave-height` 中，通过动画效果实现了波浪的动态效果。我们使用 `transform`