Dashed wheel spinner Animation HTML and CSS

Dashed wheel spinner Animation HTML and CSS complete code tutorial. Code using HTML and CSS for wheel spinner

CSS Properties

Following are the CSS properties used:

Width: The width CSS property sets an element’s width. By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area.

Aspect-ratio: The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

Border-radius: The border-radius CSS property rounds the corners of an element’s outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

Mask-composite: The mask-composite CSS property represents a compositing operation used on the current mask layer with the mask layers below it.

Margin-left: The margin-left CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

-webkit-mask-composite: The -webkit-mask-composite property specifies the manner in which multiple mask images applied to the same element are composited with one another. Mask images are composited in the opposite order that they are declared with the -webkit-mask-image property.

Background: The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.

-webkit-mask: The mask CSS shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.

Dashed wheel spinner Code Block

Here is the code for implementing the Dashed Loader Animation.

.dashed-loader {
        margin-left: 100px;
        width: 180px;
        --b: 16px;
        aspect-ratio: 1;
        border-radius: 50%;
        
        background: #f72585;
        -webkit-mask: repeating-conic-gradient(
            #0000 0deg,
            #000 1deg 70deg,
            #0000 71deg 90deg
          ),
          radial-gradient(
            farthest-side,
            #0000 calc(100% - var(--b) - 1px),
            #000 calc(100% - var(--b))
          );
        -webkit-mask-composite: destination-in;
        mask-composite: intersect;
      }

Yay! We have created the static Dashed Loader Animation.

Here is the output:

Dashed wheel spinner CSS Animation

rotate animation can be implemented by scaling up and down the shape linearly.

Following are the classes used for animation.

The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Here is the CSS animation class implementing CSS.

@keyframes  rotate {
        to {
          transform: rotate(0.5turn);
        }
      }

The following way is to declare the CSS Class inside the class block.

 .dashed-loader {
        margin-left: 100px;
        width: 180px;
        --b: 16px;
        aspect-ratio: 1;
        border-radius: 50%;
        animation: rotate 1s infinite;
        background: #f72585;
        -webkit-mask: repeating-conic-gradient(
            #0000 0deg,
            #000 1deg 70deg,
            #0000 71deg 90deg
          ),
          radial-gradient(
            farthest-side,
            #0000 calc(100% - var(--b) - 1px),
            #000 calc(100% - var(--b))
          );
        -webkit-mask-composite: destination-in;
        mask-composite: intersect;
      }
      @keyframes rotate {
        to {
          transform: rotate(0.5turn);
        }
      }

Following is the output for Dashed Loader Animation animation.

Video Tutorial

You can find the complete coding tutorial in the following YouTube Short video.

Complete Code using HTML and CSS

Copy and paste the complete code in Visual studio code to view the output.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .dashed-loader {
        margin-left: 100px;
        width: 180px;
        --b: 16px;
        aspect-ratio: 1;
        border-radius: 50%;
        animation: rotate 1s infinite;
        background: #f72585;
        -webkit-mask: repeating-conic-gradient(
            #0000 0deg,
            #000 1deg 70deg,
            #0000 71deg 90deg
          ),
          radial-gradient(
            farthest-side,
            #0000 calc(100% - var(--b) - 1px),
            #000 calc(100% - var(--b))
          );
        -webkit-mask-composite: destination-in;
        mask-composite: intersect;
      }
      @keyframes rotate {
        to {
          transform: rotate(0.5turn);
        }
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Dashed Loader Animation</h1>
    <div class="dashed-loader"></div>
  </body>
</html>

Thank you for reading this article. I hope that it helps you creating your own Dashed Loader Animation Animation using CSS and HTML. See you in next tutorial!