<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. 用sp_change_users_login消除Sql Server的孤立用户

    异常详细信息: System.Data.SqlClient.SqlException: 拒绝了对对象 'zwj_EnterpriseActivities' (数据库 'Ntours',架构 'dbo' ...

  2. OC基础 单例

    #undef  AS_SINGLETON   #define AS_SINGLETON( __class ) \       + (__class *)sharedInstance;      #un ...

  3. poj1094 topsort

    Sorting It All Out Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 32275   Accepted: 11 ...

  4. HTML5画布（矩形）

    canvas元素用于绘制图形. canvas元素是HTML5中新增的一个重要元素,元素本身是没有绘图能力,所有的绘制工作必须在javascript内部完成. 案例1: <!DOCTYPE htm ...

  5. Front end workflow

    标签:请叫我红领巾 记一哈记一哈 ^_^ 推荐个不错的群 自己刚开始折腾的时候也是无处下手,渺茫啊.然而我是有一个很好的前端群(真的很棒,欢迎加入:[375042952]),关注群里的每一次讨论,每一 ...

  6. Js与Jq 获取浏览器和对象值的方法

    JS and Jquery 都能获取页面元素的宽度,高度和相对位移等数值,那他们之间能相互转换或替代吗,写法又有哪些差异呢?本文将详细为你介绍. 1.Js获取浏览器高度和宽度document.docu ...

  7. WDCP LNMPA和LNMP 504 Gateway time-out错误的解决方法

    Nginx的特点是处理静态很给力,Apache的特点是处理动态很稳定,两者结合起来便是LNMPA,nginx处理前端,apache处理后端,这样处理静态会很快,处理动态会很稳定.当我以为安装完成以后便 ...

  8. Hibernate整合Struts2时报错

    今天在整合Hibernate和Struts2的时候遇到一个问题 总是出现各种异常,经过仔细检查,代码本身并没有问题, ----------------------------------------- ...

  9. IQC IPQC FQC OQC QA QE SQE CQS QM 简介区别

    IQC Incoming quality control 来料质量控制.是企业产品过程质量的第一关,在这个部门工作的同事最主要的是要注意文件和资料,即:图纸 样品承认书 样板 ***配件检验规范 ,还 ...

  10. Source Insight设置总结

    在网上搜索了一些关于Source Insight的设置技巧,把这些结果给总结下来: 1. 背景色选择 要改变背景色Options->preference->windows backgrou ...