3

I just created a component that is a "loading" and it contains animations in the "spinner".

If it were in the old days I would create a .scss in assets and insert @import in the component, but as I am in the Angular 9x, I also decided to update myself more about ..

Until I went to the documentation and read about animations, but honestly left something to be desired in the following requirements:

  1. How to correctly create animations with Keyframes and use them.
  2. How to properly structure these animations in the project like a professional.

I honestly couldn't understand the documentation, how could I do this?

Follow my code below:

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 */
        }
    }
}

1 Answers1

0

u can use @keyframes with to and from take a look to this example i think this is the easiest way that can reduce ur code

ahmed hlaimi
  • 51
  • 6