What are some examples of CSS loading indicators?

What are some examples of CSS loading indicators?

There are many creative CSS loading indicators! For example, you can use spinning circles, bouncing dots, or pulsing squares.

Can you show me how to create a spinning circle loading indicator?

Sure! Here's a simple example:

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

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

You can add this to your HTML to see the effect!

What about a bouncing dots loader?

Here's how you can create a bouncing dots loader:

.bouncing-loader {
  display: flex;
  justify-content: center;
}

.bouncing-loader div {
  width: 15px;
  height: 15px;
  margin: 5px;
  border-radius: 50%;
  background: #3498db;
  animation: bounce 0.6s infinite alternate;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-20px); }
}

You can add multiple divs inside a container to see the bouncing effect!