转载自：https://blog.csdn.net/wo_shi_ma_nong/article/details/88833828

话不多说，直接上代码。

（ 到这里看效果： http://www.var6.cn/work/1/22/MD的编程作品 ）

第一个：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">

  <path opacity="0.2" fill="#FF6700" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946

      s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634

      c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"></path>

  <path fill="#FF6700" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0

      C22.32,8.481,24.301,9.057,26.013,10.047z" transform="rotate(42.1171 20 20)">

      <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.5s" repeatCount="indefinite"></animateTransform>

  </path>

</svg>

第二个：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve">

    <path fill="#FF6700" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)">

        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>

    </path>

</svg>

第三个：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve">

    <path fill="#FF6700" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(275.098 25 25)">

        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>

    </path>

</svg>

第四个：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 24 24" style="enable-background:new 0 0 50 50" xml:space="preserve">

   <rect x="0" y="0" width="4" height="7" fill="#FF6700" transform="scale(1 1.94336)">

       <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1" begin="0s" dur="0.6s" repeatCount="indefinite"></animateTransform>

   </rect>

   <rect x="10" y="0" width="4" height="7" fill="#FF6700" transform="scale(1 2.72331)">

       <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1" begin="0.2s" dur="0.6s" repeatCount="indefinite"></animateTransform>

   </rect>

   <rect x="20" y="0" width="4" height="7" fill="#FF6700" transform="scale(1 1.38997)">

       <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1" begin="0.4s" dur="0.6s" repeatCount="indefinite"></animateTransform>

   </rect>

</svg>

第五个：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50" xml:space="preserve">

    <rect x="0" y="0" width="4" height="10" fill="#FF6700" transform="translate(0 9.4336)">

        <animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0" dur="0.6s" repeatCount="indefinite"></animateTransform>

    </rect>

    <rect x="10" y="0" width="4" height="10" fill="#FF6700" transform="translate(0 17.2331)">

        <animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0.2s" dur="0.6s" repeatCount="indefinite"></animateTransform>

    </rect>

    <rect x="20" y="0" width="4" height="10" fill="#FF6700" transform="translate(0 3.89973)">

        <animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0.4s" dur="0.6s" repeatCount="indefinite"></animateTransform>

    </rect>

</svg>

第六个：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50" xml:space="preserve">

    <rect x="0" y="9.22656" width="4" height="12.5469" fill="#FF6700">

        <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>

        <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>

    </rect>

    <rect x="10" y="5.22656" width="4" height="20.5469" fill="#FF6700">

        <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>

        <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>

    </rect>

    <rect x="20" y="8.77344" width="4" height="13.4531" fill="#FF6700">

        <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>

        <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>

    </rect>

</svg>

第七个：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="60px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50" xml:space="preserve">

    <rect x="0" y="0" width="4" height="20" fill="#FF6700">

        <animate attributeName="opacity" attributeType="XML" values="1; .2; 1" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>

    </rect>

    <rect x="7" y="0" width="4" height="20" fill="#FF6700">

        <animate attributeName="opacity" attributeType="XML" values="1; .2; 1" begin="0.2s" dur="0.6s" repeatCount="indefinite"></animate>

    </rect>

    <rect x="14" y="0" width="4" height="20" fill="#FF6700">

        <animate attributeName="opacity" attributeType="XML" values="1; .2; 1" begin="0.4s" dur="0.6s" repeatCount="indefinite"></animate>

    </rect>

</svg>

第八个：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="60px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50" xml:space="preserve">

    <rect x="0" y="7.6416" width="4" height="14.7168" fill="#FF6700" opacity="0.2">

        <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>

        <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>

        <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>

    </rect>

    <rect x="8" y="5.1416" width="4" height="19.7168" fill="#FF6700" opacity="0.2">

        <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>

        <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>

        <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>

    </rect>

    <rect x="16" y="7.3584" width="4" height="15.2832" fill="#FF6700" opacity="0.2">

        <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>

        <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>

        <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>

    </rect>

</svg>

纯SVG实现的Loading动画，拿走不谢的更多相关文章

  1. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  2. 纯css去实现loading动画效果图

    当项目中加载内容慢的的时候,需要显示一个loading动画效果图 之前我们使用的是一圈点点旋转的效果,现在设计修改为,如下gif图片效果-------------------------------- ...

  3. 用svg制作loading动画

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

  4. 16款纯CSS3实现的loading加载动画

    分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  5. 纯CSS3文字Loading动画特效

    纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载

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

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

  7. 页面预加载loading动画，再载入内容

    默认情况下如果网站请求速度慢,所以会有一段时间的空白页面等等,用户体验效果不好,见到很多的页面都有预加载的效果,加载之前先加载一个动画,后台进程继续加载页面内容,当页面内容加载完之后再退出动画显示内容 ...

  8. 巧用 CSS 实现动态线条 Loading 动画

    有群友问我,使用 CSS 如何实现如下 Loading 效果: 这是一个非常有意思的问题. 我们知道,使用 CSS,我们可以非常轻松的实现这样一个动画效果: <div></div&g ...

  9. 用Canvas制作loading动画

    上一篇讲到用SVG制作loading动画,其中提到了线性渐变在扇形区域中的问题,并且用SVG SIML语法制作的loading动画并不是所有浏览器都兼容,所以现在用Canvas重新实现了一遍. 这里与 ...

随机推荐

  1. WPF 手机验证码 发送按钮倒计时 代码

    private async void SendButton_Click(object sender, RoutedEventArgs e) { var button = sender as Butto ...

  2. 数字时钟（DigitalClock）

    数字时钟(DigitalClock) 这个其实就是我们平时看到的手机上面显示的时间 很简单 1.Activity //数字时钟 public class DigitalClockActivity ex ...

  3. java笔记--线程休眠sleep()的运用

    线程休眠sleep()方法的运用 在多线程编程中,有时需要让某个线程优先执行.除了可以设置这个线程的优先级为最高外,更加理想的方法是休眠其他线程,若有线程中断了正在休眠的线程,则抛出Interrupt ...

  4. ubuntu-15.04-desktop-amd64想要安装KDE桌面，结果出现如下问题

    The following packages have unmet dependencies: kubuntu-desktop : Depends: ark but it is not going t ...

  5. SCCM OS播发

    SCCM OS播发1.在分发点启用PXE支持2.将启动映像包分发到分发点:需要将x86和x64都分发到分发点,如果只分发x64,在客户端pxe启动时会出现 no response from wds s ...

  6. 我们是如何拿下Google和Facebook Offer的？

    http://posts.careerengine.us/p/57c3a1c1a09633ee7e57803c 大家好,我是小高,CMU CS Master,来Offer第一期学员,2014年初在孙老 ...

  7. 【4】python函数基础

    ---恢复内容开始--- 案例1:时间下一秒程序 #__author:"吉勇佳" #date: 2018/10/14 0014 #function: timestr=input(& ...

  8. 字节(byte)与位(bit)基础回顾

    预估方式:一个uid,String类型,最长约50字节,即50Byte,一天100亿PV,则100亿*50Byte,约500G容量存ES中或Hbase中,无法存日志文件中,一个docker磁盘才50G ...

  9. python3编程的一些实用技巧1

    1.choice函数:返回一个列表,元组,字符串的随机项   :   调用时应导入random模块,如from random import choice 2.print 两个字符串, 逗号,+号进行连 ...

  10. screen 命令基本操作教程

    sreen 命令提供的基本功能与 tmux 较为相似( 关于 tmux 基本操作可参见笔者的博文 终端复用工具 tmux 基本操作教程 ).screen 命令以会话( session )为基础为用户提 ...