用svg制作loading动画

时间:2022-04-15 22:32:26

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

但是用Canvas写的话,在颜色的渐变方面会有问题:

  线性渐变需要传递四个参数

  xstart:渐变开始点x坐标

      ystart:渐变开始点y坐标

      xEnd:渐变结束点x坐标

      yEnd:渐变结束点y坐标

  这样画出来的渐变只能用于矩形之类的图形,无法应用在诸如扇形内,此loading是圆形的不能使用放射渐变,要在圆形的区域内实现类似线性渐变的效果,只能一个点一个点的画(如有更好办法,请指教)

  可以参考:https://gist.github.com/bebraw/504568

  废话不多说直接上代码:

  图片资源:

    aaarticlea/png;base64,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" alt="" />

  样式:

 <style type="text/css">
.loadingsvg-out
{
width:72px;
height:72px;
margin:0 auto;
position:fixed;
top:50%;
margin-top:-51px;
left:50%;
margin-left:-51px;
}
</style>

HTML代码:

    <div class="loadingsvg-out">
<svg width="72px" height="72px" viewBox="0 0 72 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--<circle id="circleLoading" cx="35" cy="35" r="34" stroke="Green" fill="white" stroke-width="1"></circle>-->
<!--<circle cx="35" cy="35" r="21" stroke="Transparent" fill="white" stroke-width="1"></circle>-->
<g transform="translate(35,35)">
<path id="loadingPath" d="M -20 28 A 35 35,0,0,0,35 0 L 0 0 Z">
<animateTransform
attributeType="xml"
attributeName="transform" type="rotate"
from="0" to="360"
begin="0" dur="0.8s"
fill="freeze"
repeatCount="indefinite"
/>
</path>
</g>
<image xlink:href="../images/gototop1.png" x="0" y="0" width="70px" height="70px"/>
<defs>
<linearGradient id="loadingGradient">
<stop class="stop1" offset="0%"/>
<stop class="stop2" offset="50%"/>
<stop class="stop3" offset="100%"/>
</linearGradient>
<style type="text/css">
#loadingPath{fill:url(#loadingGradient);}
.stop1 { stop-color: #118F2C;stop-opacity: 0.8; }
.stop2 { stop-color: #93D701; stop-opacity: 1; }
.stop3 { stop-color: #fff; }
</style>
</defs>
</svg>
</div>

最终效果:

  aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAABmCAIAAAAiW9rHAAAXGElEQVR4nO2c6XcT193H+4/k6XmeJ6d50Z4nbUMTkpAQEkggTU5omqbZ6EnLUghN2manpQGaAMZg4wWw8QK28b5btixbsrVLtizL2iVr33eNpBlpNPvM80K2o9hGlsCGvvD38EIyuvf+7ufM3O/93XtnfsRs6+760cMO4D9a23QKaZtOIW3TKaRtOoW0TaeQtukU0jadQtqmU0jbdAppm04hbdMppG06hbRNp5C26RTSNp1Cegh0SDoLEyF/albs/K5H+3aTYtc1yf/VSn72HfeRMu4jZdxHvuM+UiX6abX48cbZfb3aI1PWC5YYP0MkSZp4wKE+UDopxCVy/vvO/IHy6f+9Ln6iS/3WiPn4lOMLmf9bie+sJl6vjjUsxJrmo83Tru+mXBdGFz/v0h1pVb5VK9pxgfc/DTMHeLZyIOt7YAFvOR2aIXEqYwwP3Jl/9cLkj3sWfi90ntHHb1uSPeZkhynRagBu6YEGHVCvid9UxxpV0UZlpHkufEsRvj0TapUHW2WBOxJ/+7Tn5qDxVMvc776b+HGdfL/U3YKR6FYHv6V0aIwCZz2118S/apt9TeK66ARHHeCoHRy2pvotye5lOs16oEH7PZ0mZaR5LnxbEW6ZCbXKg22yQLvE3yH2d4l8XUJvD9/TNWD4V4P0wKWpx8fMZQk0TtP0FnVgq+hQNKYLddSKn+hVvbMQbPSm+R6I6wLHHeCoHRyypvosyW5zst2YaDEAzTrgphaoV8duLuTRmQ21zIRaZcE2aY6Ob4mOwNM37embcg+MmK/enn3rMv8XKv/QFvVi8+nQNAXAtg7Vm20zryt8NYGMzJcWedPTbmjSBY47QJYtNWRN9S0mu8zJO8ZEix5o0gE3tfElOvPRJmWkWZGjE2yVBZboiHxdIm+XwNPDX6bDcw1OuoZ69efqxK/ckL0WhBY3vS+bTIeicY2/vWLyv3mWf4RhZTAz689IfWmhJz3thiadINsBsmypQWuqd5nObT3QqAPqtUtDcuN8tFkZuaUI354Ntc4EW2WBO9JAu8TfKfJ1ibzdS3TcfTz3ANc1OOkcmnAOcxwjLapPyjg/Zi/WIMRmDkabSQcloRH9yW7lO5pQewReCMHKYGbGn5H40kJPesoNTThBtgMcsaUGLKnexWSnKdm2QidnWKpo43zkezryZTpif6fI1yX0dgu8vdOevmlP/xId19Ckc4TjYI3bR/sMVY3S3zbM/iEChzdrJNocOjRDg4ivWf7ymP5v8awhmtVGYFUIngtmZvxpiS8t8EA8FzjhBMfsOTo/MKxGHVC3Qmddw/qejqd32tM35e7nuVaunSU6bPsY285uURyrFDwfgFyb0q/NoRODLTcku7iL/wSQxVjWEM1qw7AqBCsCGbk/LfYu0eE4wVE7OGxL9efRaf6hnd/NsO5OxzHCcbDY9lG2bWzMxh61cVrmTl6efjKUdtx/vzaBThy2VE3/UmD7dwKxAYg5ljVEs5owPB+CFctDMt8DcR3g2BrDytFZa1gtOcNaa+eCvCGZ6xqadA5POEY4jlG2fZRtY+fosG3cQd3pav6TIBJ8yHRgPFoneU5g+zaFOhOIFUDMsaw+AqvD8HwoowhkZC6Ipw61jJtOjZg/7Vd/1K8/ybZ8PeOv1APNxkSLAWiS+y6KvN9KAmVcxz9HFj8fs57i2M9Nusqm3TUSf7Ms37C8PzCs9eiMcxw8dUiPk4TMUd0g3YsS0EOjQ1DILfkrXPNpEPMmUUcCscYRU45OCFYGM7P2FKdNeahyameN9JlO9Xt3VB/ckL9cKXzyqmRP2/x7jfLXr4tfrpI8+93kL64KXrgi2HV24qdl/CcqhM/XSPbXKd5sVx8ZNJ+edFaJfO3CFTt39/Fydu4cmnQOc5bpjNnYXOeUNqxPYxmKoiiKElguts2+QVDYQ6BDMxTb8BlH/yWE+UHUk0QcCcQSR0yxrG7FsOYCjeennxC5zkJoKIFYYMKXwT1+SKrw1XZrPqiXH2CZTqgDjepAjyrQ7E5xQpDKFGHJ3LXj5i9blW+Wi3Zc4j9xVfB8p+ZjnvuWwNvL9/RNe/pXJjuT3w/Jo1wnTx81gghI5YlnPDNpOv2g6dA0pQ10DywczmAhCPODqDuJ2AHEEs8a8w1L6q29Inp2xleBU2B+cZJGkojVBoxEMyqMTK2qe/kDnkKc5sgoy/D5Ndm+Gun+VuURtv3GtLs/b7KzRIfjGDesQUNRFEWRQ+oTxuDIvXXzHukAsLOS+6gtxkljIQjzpVBXErEDyGIsa8w3rMXYYI/2SKXguQ71254kb209AVBiinVk8ELDJ0FBDmB8QPfnsqmnq4Svduq+nHR2rzIsU8wIoRBJkmvoUB5AdpX7k3sboe+FDs2QfeoPxfZLMBZNY8FlOvmGpVo2LPF8sKlGtP8ib4fIdc4c7Uuh3xstTRM0QwJZkzHSgRCxDdsNpWW3la9f4u9omj3KcXTmhuRJx9hCSIXgyFouK5I5qgc1x+6hp/dCxxxhd82/l8UBGIuksQCIeVOoc9nOf2BY84Gm69L99ZK9jsQoQsYVvooR0wkHMEnTBMMwJIV4U/wsAUQyakusl6Q3TgJwMiN2XawU7bwq/PWYrYXnYqtCcxiBFUCTU7fqkC06teV0KJqok+4yR1hZHMgs0fGsMqxchqUMNFcIX2iaez2QlufKpjHv2OLHdTMv6YIdBJVlGNoPihdjvQzDWIHhGKwrJgCCyhojPXXyfVWi1+RedhqFNkRDUZQtyquX7qZpcgvp0AytD/YNqY8heBLG4xksnEfnB4blSHGrRHtuK98Cspq8gZZxJlhNitcv8XfwHd/QNE7RBIR6GYbO4hFzrIcq4vJhGIZmSGdiqm7mleuyN2EsWQwdiqJGNCcMwcGtpENTN6UvOmMiBE/CeGw9w9JF4AVfWnJT/pv6mV/7IMGqGiDMO2H9tIK3s2zy5wP6P6HfDze0M8EGsqbig7EBw9ckL/ao/0pSG99ZFEV5AUWDdG9J/S2NjjUy2aV6HyUgBE/AeGzZsHJ0FuNLhqVkL56uFu/WhNsY5gdXMkXj1vhwh/rtBuWbw+a/XBHsal/4XRpbGqeBrNkLTlM0Xnw8+kh7pejZGVdTkZdPj/IDe4xffP0l0KEZekBz2BAcQAkQwRMwvsqwlvJPfaS3Qvi00HEBIaM/rICyA5xW1W8uC54Zs35mAJqn3aevCJ5rV72bxh0Mw8B40J4YJSi4+JAYhhm3fFEx9Ww4bS2GjjE4Mqw9XnzlJdBBCLCM+2gWT6AEuGxYwVWG5YOkfdqPGhWvJLPO/LIkjdoTY22qty8JdvZoj876r0h85ycdX9fKD/yb+4tbc28ksjaGYRZj3SiRWNs0Sqbw9ahBqC8Kq+pn9w0ZThMkuiEdnMyWcR8tPvkqgY7a2z5m+BQjMgiRyjMsbzIv/5xx11cL9ih9tTRD5Zf1pYQ9mg/K+TsvTO+4KX/9muTlc+O/rBI80yR7tVPzR7bl41hWyzCMO8mFMO9KKYRIRDJzQFYNYo4gJIXx8KqQ0pjXEGmZtn9zRfi0NSos5vJhGz7X+Do3n86Q9qQu0IcRaYRIZe9iWI2yg3XyfSixKjlg3EneHdW7jbOv9mgPsUwfSz0XHAlWKL2QRKxZKsAwDMPQGczvBMaArDlXJAZr+I5TV4Q7K4W7Je6yOGzQR24RVHZVzUDWPLb456ui3SJ7bTF0DMGhYe1fNp9OteBxCAmiRHrZsMIr+WfOsGzAxGXxrknbP9aWpWkihVpiGbUfkobSskhmzp8S2AGWHxKH0gpHctQc77YBw74UHyWSDMPAeHTMclzuuaIONVSLd5/n/twHih2JcTvAyq8WRN0Mw7hTohrhyyzjmWLowFiikv+zTaYTBg2NkhdwIosSUI5OzrDy7ZxnK7s5s98eHytQD81QJI3iZBojkxgFwlgQRN0wHkbJBEHBy9NlypUS1M28OGb+Ysp2tkLwzGXBM1zrKYxMKnyVdJ6pGaPtUncZwzAKX20Zf6c7PlcMoEbJnghU1NShWDq6QB9L9zFGwHmGFco3LC8kb53/Q7/2MIS5iqzzbiKprCHSUSN4vlHx/lXBrlvKN6vFz4kcVzAqMR+8msECK79MZG1XxU8q/TdRMtyseIO7eJGk8A3pjOo+0Qf6i4mkWDpCa5nMUU1SBEEiGJFB8EQaC4GYN4W6coZliA5VSV4WOy+uHRpKVQYP+yBBnXz/zbl36iW/7df9Seo570qIoxmNzHuBoL6fTxM03K/96OLUL/WRFo7lszrxa8XQkTmqhdayYiIpls6A+shimL2qGZLCMRJGiGQGCykD7VXCXbpwK8MwOJnOMaIYnKRQqsSzE1ki7ElNm2NdVwQ7L0z9vEGxzxwdpOnsnL9aE2pc9eMZ79VL0ztvyPYN6A83St9KZQMb0rGGJ/tUHxYTSbF0GqR7I5CpQJOawFCl4EVHYjicUTkTHCswYAH67AmWN8WPpOcLr+CsEkmjpmhnDNalUEsAmonDNoYhnIkJlvkjdM1ChxecvjD1RP3MwRrpi7Xifc6YfEM6EchUZEpRLJ2rgschNFygSRcwUyPZLXWXJZHFZNaGU2mChhEinkRsobTCnhxbjPc6EuxIRosQiVWzobVKo75Z3xVbghVOz3lTU1J3+Zj5ZCStXPvLSFpTL39FYLl2a+79SuGuQEq/IR0IDV8VPL6ZdComH0OJ9N3aQ0lY5rp1Q/6iKyHKz8gZhmEYmmZoiiEIKg2iLj8kdqUmYlnDhosJScShDjYLnGcEztOGcFcKca77szTubp1/m2e5ghLpSNpKUsSGdFAiXTH5WDG9LpZOGfeRAu0hONSn/nuX5m1kvTwgXxSNQqjHkxKYou2JojJymmGYAqkpzWR7tX/qUH+0IZR8lXEfKabXm0OHoqhmxXutqt8Un0PCRHgx3r8Y7ytmzbSwOJa/NUneQ/C7XtpbTqfwnUVRVLvqSLPiYAq1lNQxADEaIm3RjKakhYt8ERTCd5xtmnk3i6eKRLP5d9aGo7LaO1A/uz8IzZbaPZzK2IFhb0qAk+lSyzIMQ9FZsevSNdnrQtt1D6Dyp3RhcDEILsJogqLW2aKgtmJU3tDR7TH5xamd2lBbqWu3DMPgZMaXEtoTIwh+17uMpNFQRmkHxiIZdS4XW5HYdaFS8tyCt41ruzJm/Me46QuO5TR38YzGP4Sud7ttvqP3qT60hicL0EFwqEb86rjlb0VWuEoUjftA8WK8ByGia/8XJRLW+KA7xaEZIpG12oHhcHp2JeHiO05f5O5C8RixLBRNBtNGlb+rc+5PBLl6XXXzZ4O5TKIAHYqi+lWftql+j5CrV2GKFh2FdcZY59qpYzQzL3WX9Rs+HNAfDaUVFIM4ExOmWFcGC9IMOWH9/DzviRrZPpHjkjc+g6LpHCMHMDFpOutLqFfFKXVe41suFBNQsXT0gf5R3SeF6Sx4+8qndrmTJW8b5SsKLxijdxAivvIXmibNsZ5O9aEIrAxnlEOGI5pQG8MwKcRqiLRGMsp+/dEu1dEQqFB6b7Isx/n2b+Xe2j7NX2WOBkt4nSWxzc9CI5CpUbKnMB0g7a4Sv8S2fErdx7EHhmGimQVDtHXFxQgKlrguSN3Xcl9JCp2wfmyNcRiGIWjYEG2pk79ya+4gkLZDaMibkMrt15vk77BN51PZ0Lpxbv4KBsMwlfyfwViiMCC26Xyl8GkId5XGY40CoNQKLO090QzJtZ5RB1vI5ckUAFv69O/DWJRhGIom5ny1VeJn2+c/iIOapXEHB/XB25end3uA+VURbsnqF8Mww9rjxuBIYTqBlL6C/wLH8mUpKNYRzVD2BCsGG3Jfx81f2YDRaGYeJ5cWzBeCDQLHudxngoIXgk3l/B2d2j9mkPjK2JzImIcMx1cBKmlbopRVd18Hx/hVYTokRQhsVZf4OzxJUfE1r6sMFliMdZMUxjCMDxLxnWcpGotm1AgB0AxN0ti45YQnKcn9mKQRTai1QvR0q/pdQ7x3wd+qC7BioIlr+Wbe250fIcf4ldrXUWQMJdDJYoky7qM4mS0MKIPGb8l/36DYt2EivqFcyfFYRsMwDEGhw6bD4YwaI8Fweh7E3DRNArCNtXgUWZ770AyhDt0qn36qQf72jOu22Hb9zvyfpY6GDAqsxJbbscliGySDKyptL3RQc8wUYhWmQ1GUIyarFO4aNp5g7g8QSSGGSEcuEbXHp1mmowzDEBScyJrisA4hYqpAgzFyJ68EIfdeucTfybOUrxuYKcQq6ahKaXRs0alu1aEN6VAUJXE2lPGfGrd8StFISU3ki6Jxd3IiiSxtJU87zs75a3KfYTxiinXO+C41zx20xcdhPLJSSuwquyx4xhAaXxtVqedUSj6h0ih9wQsoNqSDkrDQXnt++ldji59QzL0kUDn5IVkU1q2sGbEXTxojnSgZNcf6BNbTCl91nfSVStHTg4Yjcu8lc6zLCwrdKU6z8qDAcm1VSF5A0Sh9oaTWS6ZjCA6OaE4Uc/lQFCV11JULnu3THkuixlIbyimF2BxJ9spXkgZ7tYdZpr/IXGV+UEaSRBQ03BS/2qY8UiU+UC549rp0303J3tvydzyJ1V6+5SdUGIahabJeutsW5RUJSOXrrRG+1Dj7hinaj1GpNSuHGwhCXc7kZO4zxcDW+FiL8q3L/KcnLF9iJESSJEmSMledITgRhiy2mEQfYBuCHFd8ZlUYD+J0U07Fjz45WaOCO/OHq8W7ebZ/hdZbG76baIZKIpYovIBTcCyrnrCcqhLvalB84E/pRNY6masKIZIkSfqhWbbpu8IxPKCTcTn1qT7cMCnNF4RG+bZr1eKXGhX7Ze4LfmgKJvw0gxcwNZqhGIbygfyFUNOk5YtayUuXpp6T2G7iJEJRFEGic+4OrumbNBolSLRNdbhA6zJHdZFJ+ebQAZHgVe5PPICseEA4idpj0k7F8XLenlrJS4P643P+OldiGoDNWSKEECGYCCFEgqAyEG4PQDPW2KjQeaZh9o0a6e5q8QHuYvmqvSqCxEyhCZbpa2Okf8Jw7m4TsQd9IjcnY3BkSF3s8LyiLJ4MpUxz7s4u5bFrwpeuC19okr/cvvBOr+7IoOFkn+7DNuU7TbMH6+UHqoTP1Qp+3a/9zBSeKLAP401qJszl0bufbnoIp7lz4hi/5BV38mFdxdIuY3CCb7s+pj83Yjg1oD/VqTrZr/lsylqhcN8xRXgJ2HvPlefEM57hGO896bvPp0iw27OvCSwX77MPOWVxEMGXjtcWsx2+oUTW8tuzrz2cp0hyQgmoQbq3pBH6wSj3BFLxKdWW0GEYBkSCNfyn/qMAyRzVNfynHv7TayuAGqR7Rdb1c78HLJG1vEG69/7RMJv4THEWS7TOHpwyn3u4aKbM59pm37jPG2pFm/nENU5mOcavB1RHnXHpg+fijEsHVEc5xi9x8n6PV61o899lYA6NVUw+JnWuTpG3VFLntYrJx8yhQkcW70Fb8h4MEPENqI90qw4Vn6zes2xRXrfq0ID6CIhs/ptntvAdKrboVL1094jmRDHrQfcgL6AY0Zyol+y6h/SySG35+3cMwcEG6d5u1SFTiLV20/YeRJCYKcTqVh1qkO4tdb2mVD2gdzfZolODmmPlvP8a0//dFGLBaLxUKDAaN4VYY/q/l/P+a1BzbOuul3w90DdboQSk9fcMao5VCx6vF+3hGL+Su26YQqxgShtMafNZhEFDMKU1hVhy1w2O8at60Z5qweODmmNaf899PoBfkh7aO+NgDAhDRk9CbolwdIFeXaB3xnVj5Z/W36ML9FoiHE9CHoaMMAY8lCC336hXSNt0CmmbTiFt0ymkbTqFtE2nkLbpFNI2nULaplNI23QKaZtOIW3TKaRtOoW0TaeQtukU0v8DrF32lZOM/uEAAAAASUVORK5CYII=" alt="" />