SVG旋转加载图标在加载数据时冻结

Question

This question is quite similar to this SO post but I'm using an svg animated spinner defined in a separate file where all my svg icons are stored. The spinner works fine when I display it by using $("#spinner").show() . However, when I try to display the spinner during loading of data (lots of data), it freezes. It restarts towards the end of loading but my code hides it after as it should. Kinda defeats the purpose of showing the loading spinner if it doesn't spin.

I created a demo below with a time out to simulate data processing. You can adjust the timeout time and the number of records if your machine is more powerful.

I know there's a css alternative in the mentioned SO post but I would like to try keeping an svg implementation.

Any input is appreciated. Thanks!

 var records = []; function LoadData() { for (var i = 0; i < 100000; i++) { setTimeout(records.push("Record" + i), 100000); } $("button").html("Done"); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- SEPARATE SVG DEF FILE --> <div> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="width:0;height:0;position:absolute;overflow:hidden;"> <defs> <symbol id="icon-loading" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve"> <path opacity="0.2" fill="#0353A4" 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 fill="#0353A4" 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"> <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.5s" repeatCount="indefinite"/> </path> </symbol> </defs> </svg> </div> <!-- VIEW PAGE --> <div> <svg><use xlink:href="#icon-loading"></use></svg> </div> <button onclick="LoadData();">Load Data</button> 

Answer 1

If you use Css animations insted it works without a problem for me.

The only thing that I noticed: the circle is a bit off center. You can fix this with css transform origin or fix the svg.

 var records = []; function LoadData() { for (var i = 0; i < 100000; i++) { setTimeout(records.push("Record" + i), 100000); } $("button").html("Done"); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> @keyframes rotate { from { transform: rotateZ(0deg) } to { transform: rotateZ(360deg) } } #loading { animation: rotate .5s infinite linear; } </style> <!-- SEPARATE SVG DEF FILE --> <div> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="width:0;height:0;position:absolute;overflow:hidden;"> <defs> <symbol id="icon-loading" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve"> <path opacity="0.2" fill="#0353A4" 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 fill="#0353A4" 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"> </path> </symbol> </defs> </svg> </div> <!-- VIEW PAGE --> <div> <svg id="loading"><use xlink:href="#icon-loading"></use></svg> </div> <button onclick="LoadData();">Load Data</button>