Issue
This is the simplest structure I have in Angular 16:
<div class="bg-pink-600 inline-block p-4">
<svg xmlns="http://www.w3.org/2000/svg" class="animate-spin h-4 w-4 fill-white" viewBox="0 0 512 512">
<path d="M222.7 32.1c5 16.9-4.6 34.8-21.5 39.8C121.8 95.6 64 169.1 64 256c0 106 86 192 192 192s192-86 192-192c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6 39.8-21.5C434.9 42.1 512 140 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 140 77.1 42.1 182.9 10.6c16.9-5 34.8 4.6 39.8 21.5z"/>
</svg>
</div>
This is weird because I used the same animation in previous version of Angular.
Solution
Not sure what exactly happed here, but when I added this keyframe in style.css
file it start working!.
The keyframe is added in the style.css
file where we added three tailwind directives.
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Answered By - Piyush Pranjal
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.