How to create an animation and structure-there to be reusable?

Question

I created an animation of a "spinner" like webwhatsapp, but this animation I created from the standard mode through the .scss and @keyframes. I searched the angular documentation and found that there is a library for animations, but honestly I did not understand very well how to use the same to have the desired effect as I did with the .scss.

Well currently my animation is in .scss of the component and operating which is:

div {
    display: flex;

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

And this is what I tried to do with the native angular library, but without success, nothing happens:

<div>
    <svg [@rotate] [style.height]="height" [style.width]="width" viewBox="0 0 44 44">
        <circle
            cx="22"
            cy="22"
            r="20"
            [@dash]
            [ngStyle]="{
                fill: circleFill ? circleFill : 'none',
                stroke: circleStroke ? circleStroke : 'none',
                strokeWidth: circleStrokeWidth ? circleStrokeWidth : '4'
            }"
        ></circle>
    </svg>
</div>


@Component({
    selector: 'app-spinner',
    templateUrl: './spinner.component.html',
    styleUrls: ['./spinner.component.scss'],
    animations: [
        trigger('rotate', [
            transition('* => void', [
                style({
                    animation: 'rotate 2s linear infinite',
                }),
                animate(
                    2000,
                    keyframes([
                        style({
                            transform: 'rotate(360deg)',
                        }),
                    ])
                ),
            ]),
        ]),
        trigger('dash', [
            transition('* => void', [
                style({ animation: 'dash 1.5s ease-in-out infinite' }),
                animate(
                    1500,
                    keyframes([
                        style({
                            strokeDasharray: '1, 150',
                            strokeDashoffset: 0,
                        }),
                        style({
                            strokeDasharray: '90, 150',
                            strokeDashoffset: -35,
                        }),
                        style({
                            strokeDasharray: '90, 150',
                            strokeDashoffset: -124,
                        }),
                    ])
                ),
            ]),
        ]),
    ],
})
export class SpinnerComponent implements OnInit {
    @Input() height = '65px';
    @Input() width = '65px';
    @Input() circleFill = 'none';
    @Input() circleStroke = '#acb9bf8f';
    @Input() circleStrokeWidth = '4';
    @Input() circleStrokeLinecap = 'round';

    constructor() {}

    ngOnInit(): void {}
}