In CSS, you can create a loading animation using the @keyframes
rule to define the animation and the animation
property to apply it to an element.
Here’s an example:
.loading-animation {
width: 50px;
height: 50px;
border-radius: 50%;
border: 5px solid #ccc;
border-top-color: #333;
animation: spin 1s infinite linear;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
And this is what it looks like:
In this example, we create a div
element with the class loading-animation
, and apply some basic styling to create a circular shape with a border. We then define an animation using the @keyframes
rule, which rotates the element 360 degrees. Finally, we apply the animation to the element using the animation
property, specifying a duration of 1 second, an infinite number of iterations, and a linear timing function.
You can customize the appearance and behavior of the loading animation by adjusting the CSS properties and animation values to suit your needs.