To create animations in After Effects, you can simply follow these steps:
.loading::after{
content:'';
display:inline-block;
width:50px;
height:50px;
background-image:url('https://picsum.photos/id/63/50/50');
}
.loading.rotate::after{
animation: rotation 2s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
You can use the following code snippet:
<div (click)="toogle=!toogle" class="loading" [class.rotate]="toogle">
here
</div>
However, issues may arise when using an input field. To address this, a custom directive can be created as shown below:
@Directive({
selector: '[pending]',
standalone: true,
exportAs: 'child',
})
export class InputPending implements OnInit {
div = this.render.createElement('div');
@Input('pending') set _(value: boolean) {
if (value) {
this.render.insertBefore(
this.elementRef.nativeElement.parentElement,
this.div,
this.render.nextSibling(this.elementRef.nativeElement)
);
} else
this.render.removeChild(
this.elementRef.nativeElement.parentElement,
this.div
);
}
constructor(private elementRef: ElementRef, private render: Renderer2) {}
ngOnInit() {
this.render.setAttribute(this.div, 'class', 'pendding');
this.render.setStyle(
this.div,
'width',
this.elementRef.nativeElement.offsetHeight + 'px'
);
this.render.setStyle(
this.div,
'height',
this.elementRef.nativeElement.offsetHeight + 'px'
);
}
}
To use the directive with an input field:
<input [pending]="toogle">
The corresponding CSS styling would be:
input ~ .pendding{
background-image: url("https://picsum.photos/id/237/50/50");
display:inline-block;
margin-bottom:-6px;
margin-left:2px;
animation: rotation 2s linear infinite
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
View the live example on StackBlitz