title: How to create and structure correctly in the animation project with Keyframe?
body: <p>I just created a component that is a <strong>"loading"</strong> and it contains <strong>animations</strong> in the "spinner".</p>
  
  <p>If it were in the old days I would create a .scss in assets and insert <code>@import</code> in the component, but as I am in the Angular 9x, I also decided to update myself more about ..</p>
  
  <p>Until I went to the documentation and read about animations, but honestly left something to be desired in the following requirements:</p>
  
  <ol>
  <li><strong>How to correctly create animations with Keyframes and use them.</strong></li>
  <li><strong>How to properly structure these animations in the project like a
  professional.</strong></li>
  </ol>
  
  <p>I honestly couldn't understand the documentation, how could I do this?</p>
  
  <p>Follow my code below:</p>
  
  <pre><code>svg {
      animation: rotate 2s linear infinite;
      -webkit-animation: rotate 2s linear infinite;
      -ms-animation: rotate 2s linear infinite;
      -moz-animation: rotate 2s linear infinite;
      -o-animation: rotate 2s linear infinite;
  
      circle {
          stroke-linecap: round;
          animation: dash 1.5s ease-in-out infinite;
          -webkit-animation: dash 1.5s ease-in-out infinite;
          -ms-animation: dash 1.5s ease-in-out infinite;
          -moz-animation: dash 1.5s ease-in-out infinite;
          -o-animation: dash 1.5s ease-in-out infinite;
      }
  
      @keyframes rotate {
          100% {
              transform: rotate(360deg);
              -webkit-transform: rotate(360deg);
              -ms-transform: rotate(360deg);
              -moz-transform: rotate(360deg);
              -o-transform: rotate(360deg);
          }
      }
      @-webkit-keyframes rotate {
          100% {
              transform: rotate(360deg);
              -webkit-transform: rotate(360deg);
              -ms-transform: rotate(360deg);
              -moz-transform: rotate(360deg);
              -o-transform: rotate(360deg);
          }
      }
  
      @keyframes dash {
          0% {
              stroke-dasharray: 1, 150; /* 1%, 101% circumference */
              stroke-dashoffset: 0;
          }
          50% {
              stroke-dasharray: 90, 150; /* 70%, 101% circumference */
              stroke-dashoffset: -35; /* 25% circumference */
          }
          100% {
              stroke-dasharray: 90, 150; /* 70%, 101% circumference */
              stroke-dashoffset: -124; /* -99% circumference */
          }
      }
      @-webkit-keyframes dash {
          0% {
              stroke-dasharray: 1, 150; /* 1%, 101% circumference */
              stroke-dashoffset: 0;
          }
          50% {
              stroke-dasharray: 90, 150; /* 70%, 101% circumference */
              stroke-dashoffset: -35; /* 25% circumference */
          }
          100% {
              stroke-dasharray: 90, 150; /* 70%, 101% circumference */
              stroke-dashoffset: -124; /* -99% circumference */
          }
      }
  }
  </code></pre>