SVG Loading
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64" fill="red">
<circle cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(45 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.125s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(90 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.25s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(135 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.375s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(180 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(225 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.625s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(270 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.75s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(315 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.875s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(180 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
</svg>
SVG Loading的更多相关文章
- 7 款华丽的 HTML5 Loading 动画特效
我们在进行大数据的传输或者复杂操作的等待时,最好能有一个Loading等待的小动画提示用户.本文将为大家分享一些超华丽的基于HTML5的Loading加载动画特效,希望你会喜欢. 1.HTML5 Ca ...
- JPG、PNG、GIF、SVG 等格式图片区别
1.图片 2. 前言 首先,我们要清楚的是,图片从类型上分,可以分为 位图 和 矢量图. 位图:位图又叫点阵图或像素图,计算机屏幕上的图是由屏幕上的发光点(即像素)构成的,每个点用二进制数据来描述其颜 ...
- AlloyTouch实现下拉刷新
原文地址:https://github.com/AlloyTeam/AlloyTouch/wiki/Pull-to-refresh 效果展示 扫码体验 你也可以点击这里访问Demo 可以点击这里查看代 ...
- 分享9款很有创意的HTML5动画
1.HTML5 SVG Loading 动画加载特效 这是一款基于HTML5/CSS3和SVG的Loading加载动画特效,一共有4种不同的动画效果.每一组Loading动画都非常可爱,他们都非常欢快 ...
- 超酷创意HTML5动画演示及代码
HTML5是未来的网页开发神器,今天分享的这些HTML5动画大部分利用了CSS3的动画属性来实现,废话不多说,直接上演示和代码. HTML5/CSS3实现大风车旋转动画 这次我们要来分享一款很酷的HT ...
- 解决HighChart开发遇到的2个问题
需求很简单,显示一条24小时的变化曲线 写完代码效果是只有一条直线,连时间轴都没有 第1个错误 Highcharts error #12 当通过要绘制的点超过1000个时就会报这个错,我按分钟计算间 ...
- 命令行打印文件树列表： tree
Linux & Mac 1.下载tree lib //mac brew install tree //centos yum install tree //ubuntu apt-get inst ...
- [Debug] Diagnose a Slow Page Using Developer Tools
Your page is showing high CPU usage and spinning up your laptop fan, but nothing is visibly happenin ...
- 用svg制作loading动画
首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Ca ...
随机推荐
- 获取Excel表中各个Sheet的方法
获取Excel表中各个Sheet的方法 private void simpleButton2_Click(object sender, EventArgs e) { OfdBOM.Filter = & ...
- 限制内容长度（CSS，jQuery）
CSS(宽度限制在100px之内,超出就会点点点) <style type="text/css"> p{width: 100px;display: inline-blo ...
- js数组 函数
js数组 filter(),map(),some(),every(),forEach(),lastIndexOf(),indexOf() 文章1:http://www.jb51.net/article ...
- HTTP 错误 404.17 - Not Found 请求的内容似乎是脚本，因而将无法由静态文件处理程序来处理。
异常信息: 解决方案: 检查一下ASP.NET有没有安装: 控制面板>程序和功能>打开或关闭Windows功能 > Internet信息服务 > 万维网服务 &g ...
- 《第一行代码》学习笔记10－活动Activity（8）
1.除了onRestart()方法,其他都是两两相对的.三种生存期: (1)完整生存期:onCreate()~onDestroy().一般情况下,一个活动会在onCreate()中完成各种初始化操作, ...
- android Log.isLoggable步骤的使用
原文地址: http://www.cnblogs.com/maxinliang/p/4024442.html android Log.isLoggable方法的使用 android 动态控制logca ...
- iOS开发中遇到的一些问题及解决方案【转载】
iOS开发中遇到的一些问题及解决方案[转载] 2015-12-29 [385][scrollView不接受点击事件,是因为事件传递失败] // // MyScrollView.m // Creat ...
- nyoj 素数环
算法:搜索 描述 有一个整数n,把从1到n的数字无重复的排列成环,且使每相邻两个数(包括首尾)的和都为素数,称为素数环. 为了简便起见,我们规定每个素数环都从1开始.例如,下图就是6的一个素数环. 输 ...
- php跨服务器传递对象
最近因为研究跨域名,跨服务器的问题,所以无聊,就想到了一个跨服务器传递对象的问题. 想要跨服务器传递数据,那么就要使用到get或者post提交. 我这里的方法有点复杂,但是因为平时工作时,有封装相应的 ...
- layout_weight
最近写Demo,突然发现了Layout_weight这个属性,发现网上有很多关于这个属性的有意思的讨论,可是找了好多资料都没有找到一个能够说的清楚的,于是自己结合网上资料研究了一下,终于迎刃而解,写出 ...