不同的项目中对于等待加载时转圈圈的样式是不同的，有的是传统的转圈的gif图片，见得比较多的是将转圈圈的换成了可爱的图标。有时候项目中加入等待加载的图片会很违和，不符合美观，所以需要用CSS做一个。下面是一个纯CSS实现转圈样式的例子。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<style>

    .load-container {

        background-color: #F1F1EA;

        width: auto;

        height: 700px;

        position: relative;

        overflow: hidden;

        -moz-box-sizing: border-box;

        box-sizing: border-box;

    }

    .loader {

        font-size: 10px;

        margin: 100px auto;

        margin-top: 300px;

        width: 1em;

        height: 1em;

        border-radius: 50%;

        text-indent: -9999em;

        position: relative;

        animation: mymove 1.3s infinite linear;

        -webkit-animation: mymove 1.5s infinite linear;

        -webkit-transform: translateZ(0);

        -ms-transform: translateZ(0);

        transform: translateZ(0);

    }

    @keyframes mymove {

        0%,

        100% {

            box-shadow: 0 -3em 0 0.2em #46A4C9, 2em -2em 0 0em #46A4C9, 3em 0 0 -1em #46A4C9, 2em 2em 0 -1em #46A4C9, 0 3em 0 -1em #46A4C9, -2em 2em 0 -1em #46A4C9, -3em 0 0 -1em #46A4C9, -2em -2em 0 0 #46A4C9;

        }

        12.5% {

            box-shadow: 0 -3em 0 0 #46A4C9, 2em -2em 0 0.2em #46A4C9, 3em 0 0 0 #46A4C9, 2em 2em 0 -1em #46A4C9, 0 3em 0 -1em #46A4C9, -2em 2em 0 -1em #46A4C9, -3em 0 0 -1em #46A4C9, -2em -2em 0 -1em #46A4C9;

        }

        25% {

            box-shadow: 0 -3em 0 -0.5em #46A4C9, 2em -2em 0 0 #46A4C9, 3em 0 0 0.2em #46A4C9, 2em 2em 0 0 #46A4C9, 0 3em 0 -1em #46A4C9, -2em 2em 0 -1em #46A4C9, -3em 0 0 -1em #46A4C9, -2em -2em 0 -1em #46A4C9;

        }

        37.5% {

            box-shadow: 0 -3em 0 -1em #46A4C9, 2em -2em 0 -1em #46A4C9, 3em 0em 0 0 #46A4C9, 2em 2em 0 0.2em #46A4C9, 0 3em 0 0em #46A4C9, -2em 2em 0 -1em #46A4C9, -3em 0em 0 -1em #46A4C9, -2em -2em 0 -1em #46A4C9;

        }

        50% {

            box-shadow: 0 -3em 0 -1em #46A4C9, 2em -2em 0 -1em #46A4C9, 3em 0 0 -1em #46A4C9, 2em 2em 0 0em #46A4C9, 0 3em 0 0.2em #46A4C9, -2em 2em 0 0 #46A4C9, -3em 0em 0 -1em #46A4C9, -2em -2em 0 -1em #46A4C9;

        }

        62.5% {

            box-shadow: 0 -3em 0 -1em #46A4C9, 2em -2em 0 -1em #46A4C9, 3em 0 0 -1em #46A4C9, 2em 2em 0 -1em #46A4C9, 0 3em 0 0 #46A4C9, -2em 2em 0 0.2em #46A4C9, -3em 0 0 0 #46A4C9, -2em -2em 0 -1em #46A4C9;

        }

        75% {

            box-shadow: 0em -3em 0 -1em #46A4C9, 2em -2em 0 -1em #46A4C9, 3em 0em 0 -1em #46A4C9, 2em 2em 0 -1em #46A4C9, 0 3em 0 -1em #46A4C9, -2em 2em 0 0 #46A4C9, -3em 0em 0 0.2em #46A4C9, -2em -2em 0 0 #46A4C9;

        }

        87.5% {

            box-shadow: 0em -3em 0 0 #46A4C9, 2em -2em 0 -1em #46A4C9, 3em 0 0 -1em #46A4C9, 2em 2em 0 -1em #46A4C9, 0 3em 0 -1em #46A4C9, -2em 2em 0 0 #46A4C9, -3em 0em 0 0 #46A4C9, -2em -2em 0 0.2em #46A4C9;

        }

    }

    @-webkit-keyframes mymove

    /*Safari and Chrome*/

        {

        0%,

        100% {

            box-shadow: 0 -3em 0 0.2em #46A4C9, 2em -2em 0 0em #46A4C9, 3em 0 0 -1em #46A4C9, 2em 2em 0 -1em #46A4C9, 0 3em 0 -1em #46A4C9, -2em 2em 0 -1em #46A4C9, -3em 0 0 -1em #46A4C9, -2em -2em 0 0 #46A4C9;

        }

        12.5% {

            box-shadow: 0 -3em 0 0 #46A4C9, 2em -2em 0 0.2em #46A4C9, 3em 0 0 0 #46A4C9, 2em 2em 0 -1em #46A4C9, 0 3em 0 -1em #46A4C9, -2em 2em 0 -1em #46A4C9, -3em 0 0 -1em #46A4C9, -2em -2em 0 -1em #46A4C9;

        }

        25% {

            box-shadow: 0 -3em 0 -0.5em #46A4C9, 2em -2em 0 0 #46A4C9, 3em 0 0 0.2em #46A4C9, 2em 2em 0 0 #46A4C9, 0 3em 0 -1em #46A4C9, -2em 2em 0 -1em #46A4C9, -3em 0 0 -1em #46A4C9, -2em -2em 0 -1em #46A4C9;

        }

        37.5% {

            box-shadow: 0 -3em 0 -1em #46A4C9, 2em -2em 0 -1em #46A4C9, 3em 0em 0 0 #46A4C9, 2em 2em 0 0.2em #46A4C9, 0 3em 0 0em #46A4C9, -2em 2em 0 -1em #46A4C9, -3em 0em 0 -1em #46A4C9, -2em -2em 0 -1em #46A4C9;

        }

        50% {

            box-shadow: 0 -3em 0 -1em #46A4C9, 2em -2em 0 -1em #46A4C9, 3em 0 0 -1em #46A4C9, 2em 2em 0 0em #46A4C9, 0 3em 0 0.2em #46A4C9, -2em 2em 0 0 #46A4C9, -3em 0em 0 -1em #46A4C9, -2em -2em 0 -1em #46A4C9;

        }

        62.5% {

            box-shadow: 0 -3em 0 -1em #46A4C9, 2em -2em 0 -1em #46A4C9, 3em 0 0 -1em #46A4C9, 2em 2em 0 -1em #46A4C9, 0 3em 0 0 #46A4C9, -2em 2em 0 0.2em #46A4C9, -3em 0 0 0 #46A4C9, -2em -2em 0 -1em #46A4C9;

        }

        75% {

            box-shadow: 0em -3em 0 -1em #46A4C9, 2em -2em 0 -1em #46A4C9, 3em 0em 0 -1em #46A4C9, 2em 2em 0 -1em #46A4C9, 0 3em 0 -1em #46A4C9, -2em 2em 0 0 #46A4C9, -3em 0em 0 0.2em #46A4C9, -2em -2em 0 0 #46A4C9;

        }

        87.5% {

            box-shadow: 0em -3em 0 0 #46A4C9, 2em -2em 0 -1em #46A4C9, 3em 0 0 -1em #46A4C9, 2em 2em 0 -1em #46A4C9, 0 3em 0 -1em #46A4C9, -2em 2em 0 0 #46A4C9, -3em 0em 0 0 #46A4C9, -2em -2em 0 0.2em #46A4C9;

        }

    }

</style>

<body>

    <div class='load-container'>

        <div class='loader'></div>

    </div>

</body>

</html>

纯CSS实现加载转圈样式的更多相关文章

  1. 用纯CSS实现加载中动画效果

    HTML <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut&quo ...

  2. 用CSS实现加载的动画效果

    用纯CSS实现加载的一些动态效果,可以把加载效果中的元素分成很多个小部分,每个部分都有动画,每个部分的动画再设置相应的延迟效果,这样,看起来就是连贯的加载动画效果.代码如下: 1.效果1 <di ...

  3. Js判断CSS文件加载完毕的实例教程

    要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: 代码如下 复制代码 // 代码节选至se ...

  4. css文件加载：@import和link的区别

    刚看了一个百度试题:请简述CSS加载方式link和@import的区别? 平时一般都用link,也知道css的加载方式,但还真的没有仔细研究过其之间的差别,查了一些资料,大致总结如下: @impot使 ...

  5. CSS远程加载字体

    CSS 远程加载字体的方法,做网站CSS的都知道,用户浏览网站时,网页上的字体是加载本地的.换言之,如果网站使用了用户电脑所没有安装的字体,那显示字体就会被默认字体所代替了,自然效果就大受影响了. 上 ...

  6. webpack教程(四)——css的加载

    首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码 意思是先用css- ...

  7. 检测到是移动端还是PC端进入页面，加载不同样式表现

    if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alc ...

  8. webpack教程——css的加载

    首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码 意思是先用css- ...

  9. jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件

    jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...

随机推荐

  1. 【转】char data[0]用法总结

    @2019-07-31 struct MyData { int nLen; ]; }; 开始没有理解红色部分的内容,上网搜索下,发现用处很大,记录下来. 在结构中,data是一个数组名:但该数组没有元 ...

  2. mysql基础_数据类型

    1.数字 (1)tinyint(小整数值) 范围:有符号(-128,127) 无符号(0.255) (2)int(大整数值) 范围:有符号  (-2 147 483 648,2 147 483 647 ...

  3. 入门 uCOS 操作系统的一点建议

    原创: 鱼鹰Osprey  鱼鹰谈单片机 3月2日 预计阅读时间: 4 分钟 对于想入门操作系统的读者,我的建议是先学 uCOS II.原因有以下几点: 1.最为重要的原因是网上相关资源非常丰富,这对 ...

  4. py操作mongodb总结

    python使用的版本 python3. python操作mongodb使用的是pymongo,安装方法: pip install pymongo 测试 PyMongo 接下来我们可以创建一个测试文件 ...

  5. Git 提交代码和更新代码

    首先,操作之前一定要看清分支!! 其次,提交代码之前一定要先更新代码!! git branch        -----查看当前分支 git pull             -----更新代码到本地 ...

  6. JavaScript设计模式—装饰器模式

    装饰器模式介绍 为对象添加新的功能,不改变其原有的结构和功能,原有的功能还是可以使用,跟适配器模式不一样,适配器模式原有的已经不能使用了,装饰器示例比如手机壳 UML类图和代码示例 Circle示原来 ...

  7. 【Android】【踩坑日记】RecyclerView获取子View的正确姿势

    开发过程中发现RecyclerView.getChildAt(position)为空的情况,但是明明这个position却没有越界. 解决办法:用recycler.getLayoutManager() ...

  8. 【转】mysql基础汇总

    mysql基础知识语法汇总整理(二)  原文:https://www.cnblogs.com/cxx8181602/p/9525950.html 连接数据库操作 /*连接mysql*/ mysql - ...

  9. Linux kernel device mapper

    Device Mapper 是 Linux2.6 内核中支持逻辑卷管理的通用设备映射机制,它为实现用于存储资源管理的块设备驱动提供了一个高度模块化的内核架构,如图 1. 图1 Device Mappe ...

  10. 脚本：将git项目下载到本地并启动

    大致思路:从git上clone源代码到本地:使用mvn package将源代码达成war/jar包:将打好的包放到tomcatpath/webapps/下:到tomcatpath/bin/下执行res ...