.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. codeforces 540 B School Marks【贪心】

    题意:一共n个数,给出其中k个数,要求这n个数的中位数为y,这n个数的和不超过x,补全剩下的n-k个数 先统计给出的k个数里面比中位数小的数, 如果cnt<=n/2,说明中位数还没有出现,把这n ...

  2. mac终端(terminal)里的快捷键

    Command + K 清屏 Command + T 新建标签 Command +W 关闭当前标签页 Command + S 保存终端输出 Command + D 垂直分隔当前标签页 Command ...

  3. Mac上vmware虚拟机Windows10安装Tomcat8.0及配置环境

    1.下载tomcat8.0或其他版本.下载地址:http://tomcat.apache.org/download-80.cgi 2.双击进行解压. 3.安装成功之后,右键我的电脑 --> 选择 ...

  4. 瞎折腾-CentOS 7.4 编译4.16.2版kernel 并安装

    CentOS 7.4下 原内核版本: 3.10.0-693.el7.x86_64 改后内核版本: 4.16.2 系统版本: CentOS-7-x86_64-Minimal-1708.iso 运行环境: ...

  5. tail---显示文件中的尾部内容

    tail命令用于输入文件中的尾部内容.tail命令默认在屏幕上显示指定文件的末尾10行.如果给定的文件不止一个,则在显示的每个文件前面加一个文件名标题.如果没有指定文件或者文件名为“-”,则读取标准输 ...

  6. 紫书 习题 10-14 UVa 10886(暴力+数据范围)

    开始的时候一看这题感觉很难,觉得肯定有什么很快的办法 不能暴力做(受了上一题10-13的影响) 然后一看那个函数感觉无从下手. 然后看了博客发现,原来这道题就是直接暴力-- 因为n的范围为10的7次方 ...

  7. 网页加速之Chromium 预载入 Prerendering

    前一篇博文已经介绍通过prefetch预先载入网页的资源来提升网页载入速度,以下我们一起来看一下网页加速之chromium prerendering.在介绍prerendering之前,先介绍两个概念 ...

  8. 今天听说了一个压缩解压整型的方式-group-varint

    group varint https://github.com/facebook/folly/blob/master/folly/docs/GroupVarint.md 这个是facebook的实现 ...

  9. 基于Linux下Iptables限制BT下载的研究

    基于Linux下Iptables限制BT下载的研究   摘要:     当前BT下载技术和软件飞速发展,给人们网上冲浪获取资源带来了极大的便利, 但同时BT占用大量的网络带宽等资源也给网络和网络管理员 ...

  10. JAVA基础数据类型

    JAVA的数据类型粗略分两种 1.基本数据类型 整数类型: byte,short,int,long 浮点类型: float,double 字符类型: char 布尔类型: boolean 基本语法格式 ...