Mandala   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +{ { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }      ../../    ../../    ../../    ../../    ../../    ../../    ../../ <></><></><></> <> </><></><></> <> </><></><></> <> </><></><></> <> </><></><></> <> </>

CSS Spinner Animations

This article demonstrates CSS spinner animations, what they are, how to make one, adding different effects, other spinner examples, and FAQs.

Adding and using CSS spinner animations can increase the engagement levels of users on a website or app. Whenever a CSS spinner is used, they indicate to the user that more content will be loaded soon. As a result, users typically dwell a little longer, waiting for the content to load.

What are Spinner Animations?

Diagram of a Spinning Element Used on a Web Form
Diagram of a Spinning Element Used on a Web Form

Spinner animations are one type of loader within the CSS loading animation definition. These animations depict that a user should wait for the given app or website to perform its task or function. It communicates to the user if they stay, then a goal or action will complete, or more content will be accessible. Spinner animations consist of HTML or SVG elements animated with CSS keyframes to rotate around one or more x, y, and z-axis and are shown for the duration of the executed resource.

Building a Spinning Animation

Building spinner animations to load content can seem like a big task. It might be easier for you to check out an article on loading animations since spinning animations are a subcategory. The loading animation article explains how to create and shows loading examples for loading purposes.

If you want to get a feel of building a rotating animation, we’ve included a walk-through demonstrating how to create an example. This example can be edited and improved beyond what we have provided; we show this example to explain the process so you can add one to your website or online application. Let’s begin!

Diagram of The Simple CSS Loader for The Walk-through
Diagram of The Simple CSS Loader for The Walk-through

The HTML below has a <div> element that wraps around an SVG element containing an SVG <circle> element. The <circle> element within the SVG is the component we will be animating using CSS.

<div class="loader">
  <svg class="circular" viewBox="25 25 50 50">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
  </svg>
</div>

Next, we have the CSS styles, which contain the properties to style the SVG loader and animate it using a keyframe at-rule. The keyframe at-rule will include properties to change the stroke-dasharray, stroke-dashoffset, and transform property values.

.loader {
  position: relative;
  margin: 0 auto;
  width: 100px;
}

.circular {
  -webkit-animation: rotate 3s linear infinite;
  animation: rotate 3s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
}

.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite;
  stroke-linecap: round;
  stroke: #285bb0;
}

@-webkit-keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

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

@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

After building the example above, you should learn more about using @keyframes. In fact, we have two other articles you can check out that will help further your understanding of working with animations.

The first article is about making a spinner displayed when in use and then making it invisible. This article lets you understand how to use a few jQuery methods to fadeIn() and fadeOut() elements.

While in the second article teaches you about creating a page loader for an HTML web page using CSS styling and keyframes. 

Types of Spinning Animation Properties

Spinning animation has several properties, such as the direction of a rotation and the axis on which it rotates. Let’s review the movement direction and the axis a rotating animation can have.

Direction

The movement direction is how an HTML or SVG element turns, which can be either clockwise or counterclockwise.

Diagram of Animation Direction
Diagram of Animation Rotation Direction
  • Clockwise

Clockwise rotation is turning an animation or object from left to right.

  • Counterclockwise

Counterclockwise is the opposite of clockwise, which means the object or animation rotates from right to left.

Axis

The axis is the imaginary line that an object rotates on.

Diagram of Axis a Spinner Animation Can Rotate Around
Diagram of Axis a Animation Can Rotate Around
  • X-Axis

The x-axis is a line that runs from west to east. The object that usually points in either of those directions, horizontally left or right, rotating around the line. In the image above, the x-axis is the imaginary red line with a red cylinder.

  • Y-Axis

The y-axis is a line that runs from north to south, and the object usually rotates on this line vertically, facing up or down. In the image above, the y-axis is a blue cylinder and an imaginary dotted line.

  • Z-Axis

The z-axis is an imaginary line that moves away from the center point of perspective. The farther it travels down the line, the farther away it is, and vice-versa. An object rotating on that line would be facing you or away and rotating clockwise or counterclockwise. We placed the z-axis on a downward angle with a green imaginary line and cylinder for demonstration purposes.

Creating CSS Keyframes for Rotation

Now that we understand the different properties of an animation, such as the spin direction and the axis. We can provide examples of implementing the rotation behavior with CSS animation. This section will show a few CSS code snippets using keyframes to get an object to rotate on a webpage.

<div class="rotate"></div>

The CSS below includes a @keyframe rotate name; within the keyframe is a set of CSS properties using a transform rotate. Some transform values are commented out, such as the rotate, rotateX, rotateY, etc. These values could also spin a spinner on another axis you want. The most important note is that for an animation to work, you need to call the animation property in a CSS style applied to an element; for example, .rotate. While looking at the animation property of the rotate style, you can see a keyframe name is called along with the amount of time to rotate, infinite, and linear values. Each of these values together instructs the keyframe to run endlessly.

.rotate {
  animation: rotate 1.5s infinite linear;
  height: 100px;
  width: 100px;
  background-color: #3d3d98;
  border-radius: 10px;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
    /*  transform: rotate3d(3, 2, 1, 5deg); */
    /*  transform: rotateX(360deg);  */
    /*  transform: rotateY(360deg); */
    /*  transform: rotateZ(0deg); */
  }
  to {
    transform: rotate(360deg);
  }
}

One last thing to mention is that for an object to rotate 360 degrees, we must ensure a To and From keyframe is included within the keyframe rule. The keyframes must have 0deg to 360deg as defined in the keyframe above.

An excellent article found on the web by Stephan Wagner provides a great example of creating a few CSS-only loading spinners.

Other Examples

Below you can find a list of different spinning animations authors have created around the web. These examples come from codepen.io, which allows you to quickly edit and deploy your custom version. Feel free to use these examples in your projects or apps.

Super Simple CSS Spinner Animation
Super Simple CSS Spinner Animation

About Project

Super Simple CSS Spinner Animation

Author

  • Thomas Mandelid
  • codepen.io
Slotted CSS3 Spinner
Slotted CSS3 Spinner

About Project

Slotted CSS3 Spinner

Author

  • Julien Knebel
  • codepen.io
Groovy CSS Spinner
Groovy CSS Spinner

About Project

Groovy CSS Spinner

Author

  • Josh
  • codepen.io
Square CSS Spinner Loader
Square CSS Spinner Loader

About Project

Square CSS Spinner Loader

Author

  • codepen.io
Multi Stripe Spiral CSS Spinner
Multi Stripe Spiral CSS Spinner

About Project

Multi Stripe Spiral CSS Spinner

Author

  • Ty Strong
  • codepen.io
Advanced Multi Line CSS Spinner
Advanced Multi Line CSS Spinner

About Project

Advanced Multi Line CSS Spinner

Author

  • massimo
  • codepen.io
iOS CSS Spinner
iOS CSS Spinner

About Project

iOS CSS Spinner

Author

  • victordg
  • codepen.io
Calming Gradient CSS Spinner
Calming Gradient CSS Spinner

About Project

Calming Gradient CSS Spinner

Author

  • Joshua Bemenderfer
  • codepen.io
Folding Square CSS Spinner
Folding Square CSS Spinner

About Project

Folding Square CSS Spinner

Author

  • Marco Livi
  • codepen.io
Dead Simple CSS Spinner Animation
Dead Simple CSS Spinner Animation

About Project

Dead Simple CSS Spinner Animation

Author

  • Max Thirouin
  • codepen.io
Four Squares CSS Spinner Animation
Four Squares CSS Spinner Animation

About Project

Four Squares CSS Spinner Animation

Author

  • Igor Amado
  • codepen.io
Single Div Element CSS Spinner
Single Div Element CSS Spinner

About Project

Single Div Element CSS Spinner

Author

  • halvves
  • codepen.io
Gradient Clock CSS Spinner
Gradient Clock CSS Spinner

About Project

Gradient Clock CSS Spinner

Author

  • Tyler Chipman
  • codepen.io
Three Line Swirl CSS Spinner
Three Line Swirl CSS Spinner

About Project

Three Line Swirl CSS Spinner

Author

  • Ty Strong
  • codepen.io
CSS Loading Dot Animation
CSS Loading Dot Animation

About Project

CSS Loading Dot Animation

Author

  • Ragnar Þór Valgeirsson
  • codepen.io

Frequently Asked Questions

Sometimes it’s easier to understand the topic discussed in an article by reading questions users have frequently asked. Here is a short list of questions and answers related to CSS spinning animations.

What is spinning in animation?

Spin animations contain an object that rotates with yaw, pitch, and roll, giving the object the appearance of spinning and showing different faces. The animation is designed primarily to showcase things, such as furniture or machine parts, or in web development, loading forms/sections, and other user interactable features.

What are the 3 types of rotation?

These rotations are called precession, nutation, and intrinsic rotation.

What is the use of animation in CSS?

Animations in CSS let you gradually change an element from one set of properties to another. To use animation in CSS, you must specify some keyframes. These keyframes hold what properties the element will have at specific times. CSS allows you to change as many properties as often as you wish with the keyframe at-rule.

How do you make a rotating animation in CSS?

To create a rotating animation in CSS, use the animation property and set the value of animations like duration, direction, and speed. Moreover, the rotate() CSS function rotates an element circularly with the transform property.

How do I rotate a div in degrees?

To rotate an element using degrees, you can achieve this by using the degree(deg) data type in transform property functions. The transform property includes function values that move, rotate, scale, and perform various HTML element transformations. For rotating in degrees, the rotate() function can be used as a transform value to turn an element. The function will need a deg from 0 - 360deg as its value to set the desired amount.

Recommended Articles