纯SVG实现的Loading动画，拿走不谢

转载自：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动画，拿走不谢的更多相关文章

纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
纯css去实现loading动画效果图
当项目中加载内容慢的的时候,需要显示一个loading动画效果图之前我们使用的是一圈点点旋转的效果,现在设计修改为,如下gif图片效果-------------------------------- ...
用svg制作loading动画
首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Ca ...
16款纯CSS3实现的loading加载动画
分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div clas ...
纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载
7 款华丽的 HTML5 Loading 动画特效
我们在进行大数据的传输或者复杂操作的等待时,最好能有一个Loading等待的小动画提示用户.本文将为大家分享一些超华丽的基于HTML5的Loading加载动画特效,希望你会喜欢. 1.HTML5 Ca ...
页面预加载loading动画，再载入内容
默认情况下如果网站请求速度慢,所以会有一段时间的空白页面等等,用户体验效果不好,见到很多的页面都有预加载的效果,加载之前先加载一个动画,后台进程继续加载页面内容,当页面内容加载完之后再退出动画显示内容 ...
巧用 CSS 实现动态线条 Loading 动画
有群友问我,使用 CSS 如何实现如下 Loading 效果: 这是一个非常有意思的问题. 我们知道,使用 CSS,我们可以非常轻松的实现这样一个动画效果: <div></div&g ...
用Canvas制作loading动画
上一篇讲到用SVG制作loading动画,其中提到了线性渐变在扇形区域中的问题,并且用SVG SIML语法制作的loading动画并不是所有浏览器都兼容,所以现在用Canvas重新实现了一遍. 这里与 ...

随机推荐

单位换算 M、Mb、MB
硬盘单位和存储单位硬盘单位存储空间 K M G Kb Mb Gb 1k =1000 bytes 1m = 1000000 bytes 1g = 1000000000 bytes 1kb ...
Ubuntu添加源列表
1.首先备份源列表:sudo cp /etc/apt/sources.list /etc/apt/sources.list_backup 2.清空原来的/etc/apt/sources.list,添加 ...
apache url rewrite及正则表达式笔记
什么是mod_rewrite? mod_rewrite是apache一个允许服务器端对请求url做修改的模块.入端url将和一系列的rule来比对.这些rule包含一个正则表达式以便检测每个特别的模式 ...
分享：将WDCP中的PHP5.2 1.7升级到PHP 5.3的方法
将wdcp中php 5.2.17升级到php 5.3方法: 1.首先下载wdcp php5.3升级脚本 wget http://down.wdlinux.cn/in/php_up53.sh 2.进行安 ...
selenium模拟鼠标操作
Selenium提供了一个类ActionChains来处理模拟鼠标事件,如单击.双击.拖动等. 基本语法: class ActionChains(object): """ ...
js滚轮事件
首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持).w3c文档已经废弃了onmousewheel ...
Linux 加载卷组
root 用户下执行: vgchange -ay vgdatamount /u01 vgdisplay 查看卷组
Windows：删除图标缓存
适用于桌面快捷方式图标丢失或图标变成白色的情况,批处理代码如下: rem 关闭explorer.exe taskkill /f /im explorer.exe attrib -h -i %userp ...
MVC中JavaScript和CSS的自动打包与压缩
在程序中安装System.Web.Optimization程序集依赖关系如下图所示: 添加BundleConfiguration类代码如下所示注意必须使用对应的ScriptBundle和Styl ...
C++ 读书笔记2
dfadsfa body { font-family: Helvetica, arial, sans-serif; font-size: 14px; line-height: 1.6; padding ...

纯SVG实现的Loading动画，拿走不谢

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

随机推荐

热门专题