Simple CSS Loading Animation

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.