<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的更多相关文章

  1. 7 款华丽的 HTML5 Loading 动画特效

    我们在进行大数据的传输或者复杂操作的等待时,最好能有一个Loading等待的小动画提示用户.本文将为大家分享一些超华丽的基于HTML5的Loading加载动画特效,希望你会喜欢. 1.HTML5 Ca ...

  2. JPG、PNG、GIF、SVG 等格式图片区别

    1.图片 2. 前言 首先,我们要清楚的是,图片从类型上分,可以分为 位图 和 矢量图. 位图:位图又叫点阵图或像素图,计算机屏幕上的图是由屏幕上的发光点(即像素)构成的,每个点用二进制数据来描述其颜 ...

  3. AlloyTouch实现下拉刷新

    原文地址:https://github.com/AlloyTeam/AlloyTouch/wiki/Pull-to-refresh 效果展示 扫码体验 你也可以点击这里访问Demo 可以点击这里查看代 ...

  4. 分享9款很有创意的HTML5动画

    1.HTML5 SVG Loading 动画加载特效 这是一款基于HTML5/CSS3和SVG的Loading加载动画特效,一共有4种不同的动画效果.每一组Loading动画都非常可爱,他们都非常欢快 ...

  5. 超酷创意HTML5动画演示及代码

    HTML5是未来的网页开发神器,今天分享的这些HTML5动画大部分利用了CSS3的动画属性来实现,废话不多说,直接上演示和代码. HTML5/CSS3实现大风车旋转动画 这次我们要来分享一款很酷的HT ...

  6. 解决HighChart开发遇到的2个问题

    需求很简单,显示一条24小时的变化曲线 写完代码效果是只有一条直线,连时间轴都没有 第1个错误  Highcharts error #12 当通过要绘制的点超过1000个时就会报这个错,我按分钟计算间 ...

  7. 命令行打印文件树列表： tree

    Linux & Mac 1.下载tree lib //mac brew install tree //centos yum install tree //ubuntu apt-get inst ...

  8. [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 ...

  9. 用svg制作loading动画

    首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Ca ...

随机推荐

  1. onblur判断数字

    window.onload = function () { document.getElementById('text1').onblur = function () { if (isNaN(docu ...

  2. Java数据结构漫谈－LinkedList

    同样是List的数据结构,LinkedList是使用了前后指针,指明节点的方式来表示链表的,这与之前介绍的ArrayList http://www.cnblogs.com/yakovchang/p/j ...

  3. cxf的使用及安全校验-01创建简单的服务端接口

    最近因为项目的需要,研究了一下webservice的使用: 这里以cxf2.7.0为例,大致介绍一下,也用于备份啦(张立胜) 大致介绍一下项目的情况:项目有maven管理,webservice调用的方 ...

  4. cocos2dx Menu

    ---恢复内容开始--- cocos2dx 3.0以后 Menu相关回调函数使用不同.现在列出当前版本可使用的方法. 看见一个说的很仔细的博客,博客源地址 http://blog.sina.com.c ...

  5. HDU 4507 有点复杂却不难的数位DP

    首先来说,,这题我wrong了好几次,代码力太弱啊..很多细节没考虑.. 题意:给定两个数 L R,1 <= L <= R <= 10^18 :求L 到 R 间 与 7 无关的数的平 ...

  6. <Win32_5>深入浅出Win32的计时器

    说起时间,对于我们搞IT的人来说,那是要多重要有多重要.我觉得有价值的时间是给有抱负和有才能的人准备的,因为他们会充分利用,不会让时间失望…… 呵呵,有点儿说远了,还是回归主题吧 Win32的计时器其 ...

  7. Gruntjs构工具学习视频

    在这里推荐一个Gruntjs的学习视频,非常不错! http://www.imooc.com/learn/30

  8. VMware 虚拟机使用RedHat，出现 connect: Network is unreachable解決方法

    http://www.linuxidc.com/Linux/2015-02/113119.htm http://www.osyunwei.com/archives/7829.html

  9. MrHuo.OAuthLoginLibs社会化登录组件Github

    今日写的博客 [原创]旧事重提:只配置参数实现OAuth2登录 引来很多园子里的朋友问候,所以今日花了一些时间整理了代码. 现已发布至github: MrHuo.OAuthLoginLibs:http ...

  10. PHP接收JSON格式的数据

    在API服务中,目前流行采用json形式来交互. 给前端调用的接口输出Json数据,这个比较简单,只需要组织好数据,用json_encode($array) 转化一下,前端就得到json格式的数据. ...