返回 导航

HTML5 / CSS3

hangge.com

CSS - 使用纯css实现一个转圈loading加载效果（附样例）

作者：hangge | 2021-12-17 08:13
    转圈圈的 loader 在许多系统中都十分常见，这个无需借助 js 或者第三方库，使用纯 CSS 就可以实现。其原理类似我之前写的文章（点击查看），绘制一个圆圈然后添加旋转动画效果即可。不同的是我们需要将其中一条边设置成不同的颜色，下面通过样例进行演示。

1，简单样式

（1）效果图


（2）样例代码 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">  
      #loader {
        border: 5px solid #f3f3f3; 
        border-top: 5px solid #555;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: inline-block;
        animation: spin 2s linear infinite;
      }

      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    </style>
  </head>
  <body>
    <div id="loader"></div>
  </body>
</html>

2，使用多种颜色的 loader

（1）效果图

（2）样例代码 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">  
      #loader1 {
        border: 16px solid #f3f3f3; 
        border-top: 16px solid #3498db;
        border-radius: 50%;
        width: 120px;
        height: 120px;
        display: inline-block;
        animation: spin 2s linear infinite;
      }
      
      #loader2 {
        border: 16px solid #f3f3f3; 
        border-top: 16px solid #3498db;
        border-bottom: 16px solid #3498db;
        border-radius: 50%;
        width: 120px;
        height: 120px;
        display: inline-block;
        animation: spin 2s linear infinite;
      }
      
      #loader3 {
        border-top: 16px solid blue;
        border-right: 16px solid green;
        border-bottom: 16px solid red;
        border-left: 16px solid pink;
        border-radius: 50%;
        width: 120px;
        height: 120px;
        display: inline-block;
        animation: spin 2s linear infinite;
      }

      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    </style>
  </head>
  <body>
    <div id="loader1"></div>
    <div id="loader2"></div>
    <div id="loader3"></div>
  </body>
</html>

3，带图标、文字的 loader

（1）效果图

（2）样例代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">  
      
      .spinWrap {
          width: 150px;
          height: 200px;
          position: fixed;
          top: 42%;
          left: 50%;
          margin-left: -75px;
          margin-top: -100px;
      }
      
      .spinnerImage {
        height: 50px;
        width: 50px;
        position: absolute;
        top: 0;
        left: 50%;
        opacity: 1;
        filter: alpha(opacity=100);
        margin: 38px 0 0 -25px; 
        background:url(icon.png) no-repeat;
      }

      .loader {
        position : absolute;
        left : 50%;
	      margin-left : -65px;
        border: 5px solid #cbcbca; 
        border-top: 5px solid #2380be;
        border-radius: 50%;
        width: 120px;
        height: 120px;
        display: inline-block;
        animation: spin 0.7s linear infinite;
      }
      
      .loadingMessage {
          box-sizing: border-box;
          width: 100%;
          margin-top: 145px;
          text-align: center;
          z-index: 100;
          outline: none;
          color: #686565;
      }

      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    </style>
  </head>
  <body>
    <div class="spinWrap">
      <div class="spinnerImage"></div>
      <div class="loader"></div>
      <div class="loadingMessage">权限验证中...</div>  
    </div>
  </body>
</html>
评论

全部评论（0）

回到顶部