What are some creative CSS loading indicator variations?

Can you show me some creative CSS loading indicator variations?

Sure! Here are a few interesting CSS loading indicators you can use: 1. Spinner: A rotating circle. 2. Pulsing Dot: A dot that grows and shrinks. 3. Bar Loader: A series of bars that fill up sequentially.

How can I implement a spinner loading indicator?

You can create a spinner using CSS animations. Here's a simple example:

.spinner {
  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); }
}

Just add the class 'spinner' to a div element!

What about a pulsing dot?

For a pulsing dot, you can use the following CSS:

.pulse {
  width: 20px;
  height: 20px;
  background-color: #3498db;
  border-radius: 50%;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

This will create a dot that expands and contracts!