Animated Single Element Loading Spinner In Pure CSS

An animated loading spinner generated by AI. Written in pure CSS and is easy to implement as a single element.

<div class="loading-spinner"></div>

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

This creates a div element with a class of loading-spinner. The width and height properties are set to 40px and 40px respectively, creating a square. The border properties are set with 4px solid #ccc, and then the top color is set to #333. The border-radius is set to 50% making it a circle. The animation property is set to spin and the duration is set to 1s and it’s linear. The infinite property makes the animation loop continuously.

In the @keyframes rule, the transform property is used to rotate the element from 0 degrees to 360 degrees in the course of the animation. This creates the illusion of the spinner spinning.

You can customize the size, color, and animation properties to match the design of your website.