How can I create a CSS loading animation?

How can I create a CSS loading animation?

You can create a CSS loading animation using keyframes and CSS properties. Would you like a simple example?

Yes, please provide a simple example.

Here's a basic example:

.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

This creates a spinning loader. You can adjust the size and colors as needed!

How do I add this animation to my HTML?

You can add the loader to your HTML like this:

<div class="loader"></div>

Just make sure to include the CSS in your <style> tag or an external stylesheet.

Can I customize the colors and size?

Absolutely! You can change the border colors and the width and height properties to customize the loader.