当前位置：移动技术网 > IT编程>网页制作>Html5 > 纯SVG实现的Loading动画，拿走不谢

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

2019年03月28日 | 移动技术网IT编程 | 我要评论

九龙珠下载,天涯侠医国语,返老还童qvod

转载自：

话不多说，直接上代码。

（到这里看效果：）

第一个：

<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>

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

Html5 canvas画图白板踩坑

这篇文章主要介绍了Html5 canvas画图白板踩坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一... [阅读全文]
h5页面唤起app如果没安装就跳转下载(iOS和Android)

这篇文章主要介绍了h5页面唤起app如果没安装就跳转下载(iOS和Android),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，... [阅读全文]
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同

这篇文章主要介绍了数据存储的三种方式 cookie sessionstorage localstorage 异同，本文通过实例代码给大家介绍的非常详细，对大家的... [阅读全文]
Html5嵌入钉钉的实现示例

这篇文章主要介绍了Html5嵌入钉钉的实现示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学... [阅读全文]
浅析图片上传及canvas压缩的流程

这篇文章主要介绍了浅析图片上传及canvas压缩的流程,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下..... [阅读全文]
HTML5新语法介绍和新特性标签

了解HTML5 新语义标签 "http://www.w3school.com.cn/html/html5_semantic_elements.asp" ... [阅读全文]
React Native超简单完整示例－tabs、页面导航、热更新、用户行为分析

初学React Native，如果没有人指引，会发现好多东西无从下手，但当有人指引后，会发现其实很简单。这也是本人写这篇博客的主要原因，希望能帮到初学者... [阅读全文]
React componentWillMount、componentDidMount、componentWillUpdate和componentDidUpdate生命周期函数的详解

React应用在初始化和更新的过程中，会经过一系列的逻辑，React在不同的逻辑时期会执行不同的生命周期函数，用来给我们做一些处理。对于初次挂载来说，... [阅读全文]
浅谈Html5页面打开app的一些思考

这篇文章主要介绍了浅谈Html5页面打开app的一些思考，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧... 20-03-30 [阅读全文]
详解canvas.toDataURL()报错的解决方案全都在这了

这篇文章主要介绍了详解canvas.toDataURL()报错的解决方案全都在这了，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，... [阅读全文]

网友评论


验证码：

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

2019年03月28日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论