title: Alternative to keyframes in CSS?
body: <p>I need to create a loading spinner, at the moment I am using the following code.</p>
  
  <p>I would like to know if is possible to rewrite it using an alternative syntax for <code>keyframes</code> (maybe transitions?).</p>
  
  <p>Unfortunately I am using a build tool which rewrite <code>keyframes</code> properties adding bugs and the <a href="https://stackoverflow.com/questions/35411580/dojo-with-xstyle-issue-with-css-keyframes">CSS generated is not working</a> so I would like to work around the problem.</p>
  
  <p>A JS solution is also possible, adding CSS inline.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.loadingSpinner {
      width: 50px;
      height: 50px;
      border: 5px solid #3498db;
      border-top-color: rgba(0, 0, 0, 0);
      border-left-color: rgba(0, 0, 0, 0);
      border-radius: 50%;
      -moz-animation: loadingSpinner 0.7s infinite linear;
      -o-animation: loadingSpinner 0.7s infinite linear;
      -webkit-animation: loadingSpinner 0.7s infinite linear;
      animation: loadingSpinner 0.7s infinite linear;
  }
  
  @-moz-keyframes loadingSpinner {
    0%   {
        -moz-transform: rotate(0deg);
  
    }
    100% {
        -moz-transform: rotate(360deg);
    }
  }
  
  @-o-keyframes loadingSpinner {
    0%   {
        -o-transform: rotate(0deg);
  
    }
    100% {
        -o-transform: rotate(360deg);
    }
  }
  
  @-webkit-keyframes loadingSpinner {
    0%   {
        -webkit-transform: rotate(0deg);
  
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
  }
  
  @keyframes loadingSpinner {
    0%   {
        transform: rotate(0deg);
  
    }
    100% {
        transform: rotate(360deg);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="loadingSpinner"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>