Значок загрузки SVG spin зависает при загрузке данных

Question

Этот вопрос очень похож на этот SO post , но я использую анимированный вращатель SVG, определенный в отдельном файле, где хранятся все мои значки SVG.Спиннер работает нормально, когда я отображаю его с помощью $("#spinner").show().Тем не менее, когда я пытаюсь отобразить счетчик во время загрузки данных (много данных), он зависает.Он перезапускается к концу загрузки, но мой код скрывает его после того, как долженKinda побеждает цель показать загрузочный счетчик, если он не вращается.

Я создал демо ниже с тайм-аутом для имитации обработки данных.Вы можете настроить время ожидания и количество записей, если ваша машина более мощная.

Я знаю, что в упомянутом сообщении SO есть альтернатива css, но я хотел бы попробовать сохранить реализацию 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>
<!-- 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

Если вы используете встроенную анимацию Css, она работает для меня без проблем.

Единственное, что я заметил: круг немного смещен от центра.Вы можете исправить это с помощью css transform origin или исправить 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>