不同的项目中对于等待加载时转圈圈的样式是不同的，有的是传统的转圈的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. Hadoop_26_MapReduce_Reduce端使用GroupingComparator求同一订单中最大金额的订单

    1. 自定义GroupingComparator 1.1.需求:有如下订单 现在需要求出每一个订单中成交金额最大的一笔交易 1.2.分析: 1.利用“订单id和成交金额”Bean作为key,可以将ma ...

  2. scala学习（4）---Array定长数组操作

    ScalaArrayNote: https://www.jianshu.com/p/d906f00c05bf

  3. 创建yum本地仓库，将阿里仓库同步到本地，并定时更新

    很多时候为了加速自己内部的rpm包安装速度,都会搭建自己的yum源仓库,而使用系统光盘自带的源,由于软件版本比较落后,所以不太适用,而大家都在用的阿里仓库比较好用,所以就想到了把阿里仓库的rpm全部拉 ...

  4. python——flask常见接口开发（简单案例）

    python——flask常见接口开发(简单案例)原创 大蛇王 发布于2019-01-24 11:34:06 阅读数 5208 收藏展开 版本:python3.5+ 模块:flask 目标:开发一个只 ...

  5. Qt disconnect函数

    1. 介绍disconnect()用法 disconnect()有3种用法,其原型如下: bool QObject::disconnect(const QObject * sender, const ...

  6. springboot2.0入门（二）-- 基础项目构建+插件的使用

    一.idea中新建第一个HelloWorld项目 点击next: 下一步 在这里可以选择我们需要依赖的第三方软件类库,包括spring-boot-web,mysql驱动,mybatis等.我们这里暂时 ...

  7. [Web Component] Allow External Styling of a Web Component's Shadow DOM

    The Shadow DOM protects your components from style conflicts. The same protection also makes it hard ...

  8. RestTemplate发送GET请求

    import org.springframework.web.client.RestTemplate; @Component @Slf4j public class JsSdkUtil { /** * ...

  9. .NET大文件分片上传

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...

  10. php+上传超大文件

    demo下载:http://t.cn/Ai9p3CKQ 教程:http://t.cn/Aipg9uUK 一提到大文件上传,首先想到的是啥??? 没错,就是修改php.ini文件里的上传限制,那就是up ...