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.

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

Animated Single Element Loading Spinner In Pure CSS

Subscribe to our newsletter and get the top 10 AI tools and apps delivered straight to your inbox. Subscribe now!

<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.

See It In Action:

See the Pen
Animated Single Element Loading Spinner
by iqq800 (@iqq800)
on CodePen.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get the latest & top AI tools sent directly to your email.

Subscribe now to explore the latest & top AI tools and resources, all in one convenient newsletter. No spam, we promise!