使用代码制作一个加载旋转器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:; padding:; }

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/

css3加载spinner的更多相关文章

  1. 纯css3加载动画

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name= ...

  2. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  3. css3加载ing动画

    项目中ajax交互成功前总会需要给用户提醒,比如请稍候.正在加载中等等,那个等待的动图以前项目中用的是gif,在移动端画质很渣,有毛边,于是在新项目中用css3展示加载中的动画效果. function ...

  4. javascript,css3加载动画

    html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...

  5. CSS3加载动画

    图1 通常我们都使用gif格式的图片或者使用Ajax来实现诸如这类的动态加载条,但是现在CSS3也可以完成,并且灵活性更大. 选1个例子看看怎么实现的吧: 效果图:   图2 代码: 使用1个名为'l ...

  6. css3加载中

    .loader { margin: 6em auto; font-size: 10px; position: relative; text-indent: -9999em; border-top: 1 ...

  7. 兼容ie10及以上css3加载进度动画

      html <div class="spinner">   <div class="rect1"></div>   < ...

  8. css3 加载动画效果

    Loading 动画效果一           HTML 代码: <div class="spinner"> <div class="rect1&quo ...

  9. CSS3 加载进度样式

    <html> <head> <style type="text/css"> body{ background-color: green; } . ...

随机推荐

  1. 【elasticsearch】安装合集

    [elasticsearch](1)centos7 使用yum安装elasticsearch 2.X [elasticsearch](2)centos7 超简单安装elasticsearch 的监控. ...

  2. linux 进程线程

    linux下进程的最大线程数.进程最大数.进程打开的文件数   ＝＝＝＝＝＝＝＝＝＝＝最大线程数＝＝＝＝＝＝＝＝＝＝＝＝＝＝ linux 系统中单个进程的最大线程数有其最大的限制 PTHREAD_TH ...

  3. 【JMeter4.0学习（六）】之逻辑控制器说明

    主要demo例子在: 链接: https://pan.baidu.com/s/1OFdsrNG7PTOYQ8TdjiVtBQ 密码: tkd2 汇总参考文档:<Jmeter之逻辑控制器(Logi ...

  4. Java并发基础：了解无锁CAS就从源码分析

    https://segmentfault.com/a/1190000015881923

  5. 洛谷P1073 最优贸易==codevs1173 最优贸易

    P1073 最优贸易 题目描述 C 国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市.任意两个 城市之间最多只有一条道路直接相连.这 m 条道路中有一部分为单向通行的道路,一 ...

  6. iOS框架你了解多少？

    1.iOS 系统可以分为以下四层,每个框架对应IOS系统里的一层,每层建立在它下面层的上面.应该尽量使用上层的框架来代替下面的框架.更高层次的框架是对底层框架基于对象的抽象.以下列出几个iOS开发的常 ...

  7. 【android】在Service的onStartCommand()中调用stopself()应该注意的问题

    在Service的onStartCommand()中调用stopself()后并不会立马destroy掉service,而是等onStartCommand()运行完才destroy. public c ...

  8. Eclipse +Tomcat配置-【菜鸟学JAVA】

    说起来也惭愧,以前用(Unieap)工具搞了一年多的JAVA+Oracle,现在居然在Eclipse中配置tomcat都搞了半天时间,原来一直是做.NET的. 今天开始不再用集成的环境,话不多说,开始 ...

  9. 从HttpServletRequest获取POST数据的代码

    我们经常需要从HttpServletRequest对象获取POST请求的数据,下面给出简练的代码共大家参考 StringBuffer jb = new StringBuffer(); String l ...

  10. ie6不认识

    1.   ie6 不认识这样连续写的类选择 .class1.class2{  } 2.   ie6 下不解析 css  input[type="text"] 等等类别的选择