.load-container {
width: 30%;
height: auto;
position: relative;
margin: 1rem auto;
} .load {
width: 2.6rem;
height: 2.6rem;
margin: 0 auto;
border: 0.4rem solid #f3f3f3;
border-top: 0.4rem solid #33adee;
border-radius: 50%;
animation: loading 1.2s infinite linear;
} @-webkit-keyframes loading {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@-moz-keyframes loading {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@-ms-keyframes loading {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@-o-keyframes loading {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes loading {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
        <div class="load-container">
<div class="load"></div>
</div>

css3--简单的加载动画的更多相关文章

  1. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

  2. 源码分享-纯CSS3实现齿轮加载动画

    纯CSS3实现齿轮加载动画是一款可以用来做Loading动画的CSS3特效代码. 有兴趣的朋友可以下载下来试试:http://www.huiyi8.com/sc/8398.html

  3. 原生JS+ CSS3创建loading加载动画;

    效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...

  4. 一个简单的加载动画,js实现

    简单效果图: html: <div class="box"> <ul> <li></li> <li></li> ...

  5. css3很酷的加载动画多款

    在线实例:http://www.admin10000.com/document/3601.html 源码:https://github.com/tobiasahlin/SpinKit

  6. css3动画特效:纯css3制作win8加载动画特效

    Windows 8     完整效果如上图:这个里面可能是css冲突,喜欢的可以自己去体征一下:   css特效代码: <style type="text/css"> ...

  7. 我用 CSS3 实现了一个超炫的 3D 加载动画

    今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果.这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱 ...

  8. 几行css3代码实现超炫加载动画

    之前为大家分享了css3实现的加载动画.今天为大家带来一款只需几行代码就可以实现超炫的动画加载特效.我们一起看下效果图: 在线预览   源码下载 实现代码: 极简的html代码: <div> ...

  9. 2款不同样式的CSS3 Loading加载动画 附源码

    原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

  10. 16款纯CSS3实现的loading加载动画

    分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

随机推荐

  1. CMake入门之创建一个基于PCL的最小工程

    最近在学习PCL,借助Cmake可省去繁琐的添加包含目录和依赖库操作. 一个典型的CMakeLists.txt内容通常为: cmake_minimum_required(VERSION 2.6 FAT ...

  2. NodeJS学习笔记 (18)基础调试-console(ok)

    模块概览 console模块提供了基础的调试功能.使用很简单,常用的API主要有 console.log().console.error(). 此外,可以基于Console类,方便的扩展出自己的con ...

  3. javascript ---(常用工具类的封装)

    1. type 类型判断 isString(o) { //是否字符串 return Object.prototype.toString.call(o).slice(8, -1) === 'String ...

  4. js实现简易打点计时器

    很简单的实现一个打点计时器,规定从start至end,每次加1,每次打印间隔100ms,并且返回取消方法. 代码如下: //打点计时器,每间隔100毫秒+1 function count(start, ...

  5. [POI2008]POD-Subdivision of Kingdom(搜索+状压)

    题意 给定一个n个点的无向图,要求将点集分成大小相等的两个子集,使两个子集之间的边数最少 (n<=26) 题解 一开始想了半天DP发现不会,去看题解全是搜索. 所以发现C(1326)可以过我就写 ...

  6. CMDB学习之六 --客户端请求测试,服务端api优化

    客户端使用agent 请求测试,agent使用的POST 请求,使用requests模块 本地采集,汇报服务端 #!/usr/bin/env python # -*- coding:utf-8 -*- ...

  7. [APIO2009]会议中心(贪心)

    P3626 [APIO2009]会议中心 题目描述 Siruseri 政府建造了一座新的会议中心.许多公司对租借会议中心的会堂很 感兴趣,他们希望能够在里面举行会议. 对于一个客户而言,仅当在开会时能 ...

  8. 【Codeforces Round #465 (Div. 2) C】Fifa and Fafa

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 这个x2,y2和圆心(x1,y1)相连.形成的直线和圆交于点(x3,y3) 则(x2,y2)和(x3,y3)的中点就是所求圆的圆心. ...

  9. Android编译环境配置

    Android编译环境配置 网上关于Android编译环境配置的整理资料有不少,经整理亲测后,希望能给需要的亲们提供帮助. 主要分为四步: 1.安装JDK(Java Standard Edition ...

  10. 优化时序之补全if else

    时序优化中重要的一项就是提高模块的最高工作频率,工作频率由关键路径决定,通常的提高工作频率的步骤是:利用时序分析工具找到关键路径,分析关键路径主要延迟是布线延迟还是逻辑延迟,然后轮番十八般武器,如果是 ...