SVG spin loading icon freezes while loading data

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>

seems like frame is frozen, waiting for data to load. you should think of async way to load data to prevent actual lags, depending on data loaded. — Round-Sliced, May 23 '18 at 12:27
sorry, that is not really clear nor helping to ansver. i tend to use fps scripts, returning current time. when running longer loops, you can return date and if certain amount passed, temporarily stop function with timeout and let frame pass, then continue loop in next frame. — Round-Sliced, May 23 '18 at 12:45

score 1 · Answer 1 · answered May 23 '18 at 13:26

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>

SVG spin loading icon freezes while loading data

1 Answers1