<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. c#利用VM_COPYDATA实现进程间通信

    c#进程间的通信方式很多种,只会这种,感觉比较简单.不懂原理,能用就行. 假设有两个程序:server(主进程),client(子进程) 1.server端: /*定义一个结构体,用来接收从子进程传过 ...

  2. transition过渡的趣玩

    本例中将三张图(来自网络)进行堆叠,鼠标悬停触发.附有源代码

  3. CSS 设计模式一 元素

    1.background  内置 是一种CSS内置设计模式,支持在元素下显示图片 HTML <!DOCTYPE html> <html lang="en"> ...

  4. unity针对iphone的屏幕旋转

    屏幕旋转可以在引擎里设置: 依次点开 Edit——Project Setting——Player 即可设置如图: 接下来的是 雨松大神的 代码控制,本屌是安卓机器,没能测试. C# using Uni ...

  5. SSM框架搭建web服务器实现登录功能(Spring+SpringMVC+Mybatis)

    初学java EE,虽然知道使用框架会使开发更加便捷高效,但是对于初学者来说,感到使用框架比较迷惑,尤其是各种jar包的引用.各种框架的配置.注解的使用等等. 最好的学习方法就是实践,于是下载了一个现 ...

  6. <转> 纸牌屋1-4集分析

    原文:http://blog.sina.com.cn/s/blog_b86c61490102v56t.html 第一季第一集 主人公弗兰克的出场,是以对待一只邻家将死之狗的态度展开的,充分显示了主人公 ...

  7. 初学 Play Framework 以及可能遇到的问题

    这段话之后都是我从别人那拷贝过来的资料,方便大家查阅 红色标注字体是我自己遇到的一些问题: 如果你遇到了这样的问题  :

  8. Python之路第二天，基础(2)-基本数据类型

    一.Python数据类型 数 在Python中有4种类型的数,整数,长整数,浮点数和复数. 2是一个整数的例子 长整数不过是大一点的整数 3.23和52.3E是浮点数的例子.E标记表示10的幂.52. ...

  9. 递归:这帮坑爹的小兔崽子 - 零基础入门学习Python023

    递归:这帮坑爹的小兔崽子 让编程改变世界 Change the world by program 斐波那契数列的递归实现 这节课我们用斐波那契(Fibonacci)数列的递归实现来作为第一个例子吧,斐 ...

  10. 火狐的打开3D效果

    最近研究网页的时候,想看看一个页面中盒子的层次问题,点击右键查看元素的后,没有发现3D效果的按钮. 在网上百度后说要什么显卡支持,以为是公司的电脑用的是集显,就没有这个功能.回去用自己的笔记本后,发现 ...