实现CSS加载动画

本教程学习如何通过CSS实现加载动画的效果。

如何实现加载动画

最终效果如下：

<style>
  .loader {
    border: 16px solid #f3f3f3;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    border-top: 16px solid #5cb85c;
    border-radius: 50%;
    width: 120px;
    height: 120px;
  }

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

    100% {
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
</style>
<div class="loader"></div>

尝试一下 »

<style>
  .loader-small {
    border: 5px solid #f3f3f3;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    border-top: 5px solid #555;
    border-radius: 50%;
    width: 50px;
    height: 50px;
  }


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

    100% {
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
</style>

<div class="loader-small"></div>

尝试一下 »

步骤1，增加loader的HTML

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

步骤2，增加CSS，包括样式和动画

.loader {
  border: 16px solid #f3f3f3; /* 淡灰色 */
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  border-top: 16px solid #5cb85c; /* 绿色 */
  border-radius: 50%;
  width: 120px;
  height: 120px;
}

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

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

最终加载动画的代码如下

<style>
  .loader {
    border: 16px solid #f3f3f3;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    border-top: 16px solid #5cb85c;
    border-radius: 50%;
    width: 120px;
    height: 120px;
  }

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

    100% {
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
</style>
<div class="loader"></div>

尝试一下 »

案例解析

  1. 在上面的CSS中， border 属性指定了加载动画的边框颜色和边框大小。通过 border-radius属性将div变成一个圆环。

  2. 绿色的部分是通过 border-top 属性去控制的。你也可以通过 border-bottom，border-left ，还有 border-right来设置其他边框的颜色（如下面的例子）。

  3. 加载动画的大小是通过width 和height属性控制的。

  4. 最后我们通过animation属性来控制绿色部分每两秒旋转一圈。

实现不同的加载样式

两个边框的效果

<style>
  .loader-2 {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    border-bottom: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }

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

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>

<div class="loader-2"></div>

尝试一下 »

三个边框的效果

<style>
  .loader-3 {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid blue;
    border-right: 16px solid green;
    border-bottom: 16px solid red;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }

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

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>

<div class="loader-3"></div>

尝试一下 »

四个边框的效果

<style>
  .loader-4 {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid blue;
    border-right: 16px solid green;
    border-bottom: 16px solid red;
    border-left: 16px solid pink;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }

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

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>

<div class="loader-4"></div>

尝试一下 »

实现展示加载动画后展示内容

下面的例子实现如何将加载动画放置在页面中间，当加载完毕时，展示页面内容。

<html>
<head>
  <style>
    /* 使加载动画在页面居中 */

    .loader {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      width: 150px;
      height: 150px;
      margin: -75px 0 0 -75px;
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid #5cb85c;
      width: 120px;
      height: 120px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }

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

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    .page-content {
      display: none;
      text-align: center;
    }
    /* 为"页面内容"增加动画 */

    .animate-bottom {
      position: relative;
      -webkit-animation-name: animate-bottom;
      -webkit-animation-duration: 1s;
      animation-name: animate-bottom;
      animation-duration: 1s
    }

    @-webkit-keyframes animate-bottom {
      from {
        bottom: -100px;
        opacity: 0
      }
      to {
        bottom: 0px;
        opacity: 1
      }
    }

    @keyframes animate-bottom {
      from {
        bottom: -100px;
        opacity: 0
      }
      to {
        bottom: 0;
        opacity: 1
      }
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>

  <div class="js-loader loader"></div>

  <div class="js-page-content page-content animate-bottom">
    <h2>加载完成!</h2>
    <p>页面上增加了一些新的内容...</p>
    <a href="/examples/how-to-css-loader5/result.html">重新加载</a>
  </div>

  <script>
    $(function() {
      setTimeout(showPage, 3000);

      function showPage() {
        $('.js-loader').hide();
        $('.js-page-content').show();
      }
    });
  </script>

</body>
</html>

尝试一下 »