0
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 {}
}
It was not very clear your doubt, want to know how to reuse the animation you made with scss is this?
– LeAndrade
@Leandrade no.. My animation is in the code of . scss is correct and working, what I would like to know is how to convert this model to angular Animation.
– user148754