css3加载spinner

使用代码制作一个加载旋转器spinner

实现的原理是：

1.两个圆圈，其中一个圆圈是使用pseudo元素（：before）产生

2.由pseudo元素生成的圆通过负数的z-index而作用在下面

3.由pseudo元素生成的圆圈有内置的阴影inset box-shadow

4.普通的圆圈有普通的阴影 regular box-shadow

5.“loading”是有overflow：hidden的strong标签

5.strong标签的长度由keyframe设置成动画，无限的reveal

6.文本通过line-height等于height的方法来垂直居中

7.旋转器是一个三角性，放在普通圆圈下面，以及放在由pseudo元素生成的圆圈的上面。

8.三角形通过keyframe设置成从0到360度无限旋转的动画。

 

理想状态下，三角形也应该设置成由pseudo元素生成，但是不幸的是到目前为止pseudo元素不支持动画。firefox可以transition它们，但是不能通过keyframe来设置动画（至少到目前为止不可以）。

效果图地址：https://css-tricks.com/examples/Loading/

html：

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    
    <title>Loading Thingy (WebKit)</title>
    
    <link rel='stylesheet' href='css/style.css'>

    <style>
        #loading {
            margin: 80px auto;
            position: relative;
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50px;
               -moz-border-radius: 50px;
                    border-radius: 50px;
            background: #ccc;
            font: 12px "Lucida Grande", Sans-Serif;
            text-align: center;
            line-height: 100px;
            color: white;
            -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
            -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
            box-shadow: 0 0 5px rgba(0,0,0,0.5);
            
        }
        #loading:before {
            content: "";
            position: absolute;
              left: -20px;
               top: -20px;
            bottom: -20px;
             right: -20px;
            -webkit-border-radius: 70px;
               -moz-border-radius: 70px;
                    border-radius: 70px;
            background: #eee;
            z-index: -2;
            -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
            -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
            box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
        }
        #loading span {
            position: absolute;
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 80px solid rgba(255,255,255,0.7);
            z-index: -1;
            top: -28px;
            left: 0px;
            -webkit-animation: ticktock 5s linear infinite;
            -webkit-transform-origin: 50px 80px;
        }
        #loading strong {
            overflow: hidden;
            display: block;
            margin: 0 auto;
            -webkit-animation: expand 2.5s linear infinite;
        }
        
        @-webkit-keyframes expand {
            0% {
                    width: 0;
            }
            100% {
                    width: 60px;
            }
        }
        
        @-webkit-keyframes ticktock {
            0% {
                    -webkit-transform: rotate(0);
            }
            100% {
                    -webkit-transform: rotate(360deg);
            }
        }
        
    </style>

</head>

<body>
  
<div id="demo-top-bar">

  <div id="demo-bar-inside">

    <h2 id="demo-bar-badge">
      <a href="/">CSS-Tricks Example</a>
    </h2>

    <div id="demo-bar-buttons">
          </div>

  </div>

</div>
    <div id="page-wrap">
    
        <div id="loading"><strong>loading...</strong><span></span></div>
    
    </div>
    
 <style type="text/css" style="display: none !important;">
    * {
        margin: 0;
        padding: 0;
    }
    body {
        overflow-x: hidden;
    }
    #demo-top-bar {
        text-align: left;
        background: #222;
        position: relative;
        zoom: 1;
        width: 100% !important;
        z-index: 6000;
        padding: 20px 0 20px;
    }
    #demo-bar-inside {
        width: 960px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }
    #demo-bar-buttons {
        padding-top: 10px;
        float: right;
    }
    #demo-bar-buttons a {
        font-size: 12px;
        margin-left: 20px;
        color: white;
        margin: 2px 0;
        text-decoration: none;
        font: 14px "Lucida Grande", Sans-Serif !important;
    }
    #demo-bar-buttons a:hover,
    #demo-bar-buttons a:focus {
        text-decoration: underline;
    }
    #demo-bar-badge {
        display: inline-block;
        width: 302px;
        padding: 0 !important;
        margin: 0 !important;
        background-color: transparent !important;
    }
    #demo-bar-badge a {
        display: block;
        width: 100%;
        height: 38px;
        border-radius: 0;
        bottom: auto;
        margin: 0;
        background: url(/images/examples-logo.png) no-repeat;
        background-size: 100%;
        overflow: hidden;
        text-indent: -9999px;
    }
    #demo-bar-badge:before, #demo-bar-badge:after {
        display: none !important;
    }
</style>
</body>

</html>

 css：

/*
     CSS-Tricks Example
     by Chris Coyier
     http://css-tricks.com
*/

* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

#page-wrap { width: 960px; margin: 150px auto; }

 

原文：https://css-tricks.com/css3-loading-spinner/

 

posted @ 2017-03-30 21:14  RachelChen  阅读(1559)  评论(0)  编辑  收藏  举报