Pure CSS implementation of a loader animation

Question

Pure CSS implementation of a loader animation

My attempt at creating a loader animation was inspired by this design on dribbble: . After looking at the comments, I came across a CodePen with a similar animation, but it was all done in JavaScript: https://codepen.io/AbubakerSaeed/full/yLaQVdq

tl2
  .set(".dC-1", { rotate: 0 })
  .set(".dC-2", { rotate: 30 })
  .set(".dC-3", { rotate: 60 })
  .set(".dC-4", { rotate: 90 })
  .set(".dC-5", { rotate: 120 })
  .set(".dC-6", { rotate: 150 })
  .set(".dC-7", { rotate: 180 })
  .set(".dC-8", { rotate: 210 })
  .set(".dC-9", { rotate: 240 })
  .set(".dC-10", { rotate: 270 })
  .set(".dC-11", { rotate: 300 })
  .set(".dC-12", { rotate: 330 })
  .to(".dC-1", {
  delay: s,
  duration: s,
    rotate: 30,
})

I attempted to convert this animation into pure CSS but struggling to understand how to do it. Could someone guide me on how to create these two timelines in SCSS and translate the JavaScript code into SCSS?

css sass css-animations

Answer 1

Answer №1

To achieve this effect, you can manage two animations simultaneously:

A rotating plane with blocks moving in and out
Displaying/hiding divs on a static plane

You can coordinate the animation to show/hide the blocks on the different plane when necessary.

For instance, if one rotation takes 5 seconds, the entire animation will last 10 seconds - with 5 seconds spent invisible and the other 5 visible.

In the example below, I've created a demonstration with two blocks. You can easily expand it to include as many blocks as needed. I've slightly shown the blocks when they should be invisible to illustrate the animation process.

body {
  background-color: #1f2227;
}

.wrapper {
  width: 200px;
  height: 200px;
  position: relative;
  border: 1px solid white;
  padding: 20px;
  transform: rotate(-90deg)
}

.spinner,
.static {
  position: absolute;
  left: 50%;
  top: 50%;
}

.spinner {
  animation: 5s linear infinite spin;
}

.block {
  width: 10px;
  height: 10px;
  background-color: #EEE;
  display: inline-block;
  position: absolute;
  left: calc(50% - 5px);
  top: calc(50% - 5px);
}

.static .b1 {
  transform: translateX(100px);
  animation: 10s ease-in-out infinite hide-1;
}

.static .b2 {
  transform: rotate(30deg) translateX(100px);
  animation: 10s ease-in-out infinite hide-2;
}

.static .b3 {
  transform: rotate(60deg) translateX(100px);
}

.spinner .b1 {
  transform: translateX(100px);
  animation: 10s ease-in-out infinite go-in-out-1;
}

.spinner .b2 {
  transform: rotate(30deg) translateX(100px);
  animation: 10s ease-in-out infinite go-in-out-2;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes go-in-out-1 {
  0% {
    transform: translateX(100px);
    opacity: 1;
  }
  4%,
  50% {
    transform: translateX(0px);
    opacity: 1;
  }
  54% {
    transform: translateX(100px);
    opacity: 1;
  }
  54.1%,
  100% {
    transform: translateX(100px);
    opacity: .1;
  }
}

@keyframes go-in-out-2 {
  4% {
    transform: translateX(100px);
    opacity: 1;
  }
  8%,
  46% {
    transform: translateX(10px);
    opacity: 1;
  }
  50% {
    transform: translateX(100px);
    opacity: 1;
  }
  50.1%,
  100% {
    transform: translateX(100px);
    opacity: .1;
  }
}

@keyframes hide-1 {
  0% {
    opacity: .1;
  }
  4%,
  50% {
    opacity: .1;
  }
  50.1%,
  100% {
    opacity: 1;
  }
}

@keyframes hide-2 {
  4% {
    opacity: .1;
  }
  8%,
  54% {
    opacity: .1;
  }
  54.1%,
  100% {
    opacity: 1;
  }
}

<div class="wrapper">
  <div class="static">
    <div class="block b1"> </div>
    <div class="block b2"> </div>
    <div class="block b3"> </div>
  </div>
  <div class="spinner">
    <div class="block b1"> </div>
    <div class="block b2"> </div>
  </div>
</div>

Answer 2

To achieve this effect, you can manage two animations simultaneously:

A rotating plane with blocks moving in and out
Displaying/hiding divs on a static plane

You can coordinate the animation to show/hide the blocks on the different plane when necessary.

For instance, if one rotation takes 5 seconds, the entire animation will last 10 seconds - with 5 seconds spent invisible and the other 5 visible.

In the example below, I've created a demonstration with two blocks. You can easily expand it to include as many blocks as needed. I've slightly shown the blocks when they should be invisible to illustrate the animation process.

body {
  background-color: #1f2227;
}

.wrapper {
  width: 200px;
  height: 200px;
  position: relative;
  border: 1px solid white;
  padding: 20px;
  transform: rotate(-90deg)
}

.spinner,
.static {
  position: absolute;
  left: 50%;
  top: 50%;
}

.spinner {
  animation: 5s linear infinite spin;
}

.block {
  width: 10px;
  height: 10px;
  background-color: #EEE;
  display: inline-block;
  position: absolute;
  left: calc(50% - 5px);
  top: calc(50% - 5px);
}

.static .b1 {
  transform: translateX(100px);
  animation: 10s ease-in-out infinite hide-1;
}

.static .b2 {
  transform: rotate(30deg) translateX(100px);
  animation: 10s ease-in-out infinite hide-2;
}

.static .b3 {
  transform: rotate(60deg) translateX(100px);
}

.spinner .b1 {
  transform: translateX(100px);
  animation: 10s ease-in-out infinite go-in-out-1;
}

.spinner .b2 {
  transform: rotate(30deg) translateX(100px);
  animation: 10s ease-in-out infinite go-in-out-2;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes go-in-out-1 {
  0% {
    transform: translateX(100px);
    opacity: 1;
  }
  4%,
  50% {
    transform: translateX(0px);
    opacity: 1;
  }
  54% {
    transform: translateX(100px);
    opacity: 1;
  }
  54.1%,
  100% {
    transform: translateX(100px);
    opacity: .1;
  }
}

@keyframes go-in-out-2 {
  4% {
    transform: translateX(100px);
    opacity: 1;
  }
  8%,
  46% {
    transform: translateX(10px);
    opacity: 1;
  }
  50% {
    transform: translateX(100px);
    opacity: 1;
  }
  50.1%,
  100% {
    transform: translateX(100px);
    opacity: .1;
  }
}

@keyframes hide-1 {
  0% {
    opacity: .1;
  }
  4%,
  50% {
    opacity: .1;
  }
  50.1%,
  100% {
    opacity: 1;
  }
}

@keyframes hide-2 {
  4% {
    opacity: .1;
  }
  8%,
  54% {
    opacity: .1;
  }
  54.1%,
  100% {
    opacity: 1;
  }
}

<div class="wrapper">
  <div class="static">
    <div class="block b1"> </div>
    <div class="block b2"> </div>
    <div class="block b3"> </div>
  </div>
  <div class="spinner">
    <div class="block b1"> </div>
    <div class="block b2"> </div>
  </div>
</div>

Answer 3

Answer №2

Hi Lars, your assistance is greatly appreciated. I've been working on a project involving 12 blocks, but the animation seems to be behaving unpredictably. Do you think my calculations for timing or percentages might be incorrect?

Below is the code I've written in SCSS for better readability:

.spinner {
  animation: 5s linear infinite spin;
}
    
$rotation: 0deg;
    
    .static {
      @for $i from 1 to 12 {
        .b#{$i} {
          transform: rotate($rotation) translateX($loader-size / 2);
          animation: 10s ease-in-out infinite hide-#{$i};
        }
    
        $rotation: $rotation + 30deg;
      }
    }
    
    $rotation: 0deg;
    
    .spinner {
      @for $i from 1 to 12 {
        .b#{$i} {
          transform: rotate($rotation) translateX($loader-size / 2);
          animation: 10s linear infinite go-in-out-#{$i};
        }
    
        $rotation: $rotation + 30deg;
      }
    }
    
    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    
    $first: 0;
    $second: 4;
    $third: 50;
    $fourth: 54;
    $fifth: 54.1;
    
    @for $i from 1 to 12 {
      @keyframes go-in-out-#{$i} {
        #{$first * 1%} {
          transform: translateX($loader-size / 2);
          opacity: 1;
        }
    
        #{$second * 1%},
        #{$third * 1%} {
          transform: translateX($block-size * ($i - 1));
          opacity: 1;
        }
    
        #{$fourth * 1%} {
          transform: translateX($loader-size / 2);
          opacity: 1;
        }
    
        #{$fifth * 1%},
        100% {
          transform: translateX($loader-size / 2);
          opacity: 0;
        }
      }
    
      $first: $first + 4;
      $second: $second + 4;
      $third: $third - 4;
      $fourth: $fourth - 4;
      $fifth: $fifth - 4;
    }
    
    $first-2: 0;
    $second-2: 4;
    $third-2: 50;
    $fourth-2: 50.1;
    
    @for $i from 1 to 12 {
      @keyframes hide-#{$i} {
        #{$first-2 * 1%} {
          opacity: 0;
        }
    
        #{$second-2 * 1%},
        #{$third-2 * 1%} {
          opacity: 0;
        }
    
        #{$fourth-2 * 1%},
        100% {
          opacity: 1;
        }
      }
    
      $first-2: $first-2 + 4;
      $second-2: $second-2 + 4;
      $third-2: $third-2 + 4;
      $fourth-2: $fourth-2 + 4;
    }

Answer 4

Hi Lars, your assistance is greatly appreciated. I've been working on a project involving 12 blocks, but the animation seems to be behaving unpredictably. Do you think my calculations for timing or percentages might be incorrect?

Below is the code I've written in SCSS for better readability:

.spinner {
  animation: 5s linear infinite spin;
}
    
$rotation: 0deg;
    
    .static {
      @for $i from 1 to 12 {
        .b#{$i} {
          transform: rotate($rotation) translateX($loader-size / 2);
          animation: 10s ease-in-out infinite hide-#{$i};
        }
    
        $rotation: $rotation + 30deg;
      }
    }
    
    $rotation: 0deg;
    
    .spinner {
      @for $i from 1 to 12 {
        .b#{$i} {
          transform: rotate($rotation) translateX($loader-size / 2);
          animation: 10s linear infinite go-in-out-#{$i};
        }
    
        $rotation: $rotation + 30deg;
      }
    }
    
    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    
    $first: 0;
    $second: 4;
    $third: 50;
    $fourth: 54;
    $fifth: 54.1;
    
    @for $i from 1 to 12 {
      @keyframes go-in-out-#{$i} {
        #{$first * 1%} {
          transform: translateX($loader-size / 2);
          opacity: 1;
        }
    
        #{$second * 1%},
        #{$third * 1%} {
          transform: translateX($block-size * ($i - 1));
          opacity: 1;
        }
    
        #{$fourth * 1%} {
          transform: translateX($loader-size / 2);
          opacity: 1;
        }
    
        #{$fifth * 1%},
        100% {
          transform: translateX($loader-size / 2);
          opacity: 0;
        }
      }
    
      $first: $first + 4;
      $second: $second + 4;
      $third: $third - 4;
      $fourth: $fourth - 4;
      $fifth: $fifth - 4;
    }
    
    $first-2: 0;
    $second-2: 4;
    $third-2: 50;
    $fourth-2: 50.1;
    
    @for $i from 1 to 12 {
      @keyframes hide-#{$i} {
        #{$first-2 * 1%} {
          opacity: 0;
        }
    
        #{$second-2 * 1%},
        #{$third-2 * 1%} {
          opacity: 0;
        }
    
        #{$fourth-2 * 1%},
        100% {
          opacity: 1;
        }
      }
    
      $first-2: $first-2 + 4;
      $second-2: $second-2 + 4;
      $third-2: $third-2 + 4;
      $fourth-2: $fourth-2 + 4;
    }

Answer 5

Answer №3

Check out this example showcasing an Angular Material loader using only HTML and CSS

@import url(https://fonts.googleapis.com/css?family=RobotoDraft:500);
* {
  font-family: 'RobotoDraft', sans-serif;
  font-size: 15px;
  padding: 20px;
}

.material_block {
  width: 580px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
  margin: auto;
}

.spinner {
  -webkit-animation: rotation 1.35s linear infinite;
  animation: rotation 1.35s linear infinite;
}

@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}

@keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}

.circle {
  stroke-dasharray: 180;
  stroke-dashoffset: 0;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  -webkit-animation: turn 1.35s ease-in-out infinite;
  animation: turn 1.35s ease-in-out infinite;
}

@-webkit-keyframes turn {
  0% {
    stroke-dashoffset: 180;
  }
  50% {
    stroke-dashoffset: 45;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 180;
    -webkit-transform: rotate(450deg);
    transform: rotate(450deg);
  }
}

@keyframes turn {
  0% {
    stroke-dashoffset: 180;
  }
  50% {
    stroke-dashoffset: 45;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 180;
    -webkit-transform: rotate(450deg);
    transform: rotate(450deg);
  }
}

svg:nth-child(1) {
  stroke: #e51c23;
}

svg:nth-child(2) {
  stroke: #e91e63;
}

svg:nth-child(3) {
  stroke: #9c27b0;
}

svg:nth-child(4) {
  stroke: #673ab7;
}

svg:nth-child(5) {
  stroke: #3f51b5;
}

svg:nth-child(6) {
  stroke: #5677fc;
}

svg:nth-child(7) {
  stroke: #03a9f4;
}

svg:nth-child(8) {
  stroke: #00bcd4;
}

svg:nth-child(9) {
  stroke: #009688;
}

svg:nth-child(10) {
  stroke: #259b24;
}

svg:nth-child(11) {
  stroke: #8bc34a;
}

svg:nth-child(12) {
  stroke: #cddc39;
}

svg:nth-child(13) {
  stroke: #ffeb3b;
}

svg:nth-child(14) {
  stroke: #ffc107;
}

svg:nth-child(15) {
  stroke: #ff9800;
}

svg:nth-child(16) {
  stroke: #ff5722;
}

svg:nth-child(17) {
  stroke: #795548;
}

svg:nth-child(18) {
  stroke: #9e9e9e;
}

svg:nth-child(19) {
  stroke: #607d8b;
}

<div class="material_block">
  <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"><circle class="circle" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle></svg>
  <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"><circle class="circle" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle></svg>
  <!-- Add more SVG elements here as needed -->
</div>

Answer 6

Check out this example showcasing an Angular Material loader using only HTML and CSS

@import url(https://fonts.googleapis.com/css?family=RobotoDraft:500);
* {
  font-family: 'RobotoDraft', sans-serif;
  font-size: 15px;
  padding: 20px;
}

.material_block {
  width: 580px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
  margin: auto;
}

.spinner {
  -webkit-animation: rotation 1.35s linear infinite;
  animation: rotation 1.35s linear infinite;
}

@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}

@keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}

.circle {
  stroke-dasharray: 180;
  stroke-dashoffset: 0;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  -webkit-animation: turn 1.35s ease-in-out infinite;
  animation: turn 1.35s ease-in-out infinite;
}

@-webkit-keyframes turn {
  0% {
    stroke-dashoffset: 180;
  }
  50% {
    stroke-dashoffset: 45;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 180;
    -webkit-transform: rotate(450deg);
    transform: rotate(450deg);
  }
}

@keyframes turn {
  0% {
    stroke-dashoffset: 180;
  }
  50% {
    stroke-dashoffset: 45;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 180;
    -webkit-transform: rotate(450deg);
    transform: rotate(450deg);
  }
}

svg:nth-child(1) {
  stroke: #e51c23;
}

svg:nth-child(2) {
  stroke: #e91e63;
}

svg:nth-child(3) {
  stroke: #9c27b0;
}

svg:nth-child(4) {
  stroke: #673ab7;
}

svg:nth-child(5) {
  stroke: #3f51b5;
}

svg:nth-child(6) {
  stroke: #5677fc;
}

svg:nth-child(7) {
  stroke: #03a9f4;
}

svg:nth-child(8) {
  stroke: #00bcd4;
}

svg:nth-child(9) {
  stroke: #009688;
}

svg:nth-child(10) {
  stroke: #259b24;
}

svg:nth-child(11) {
  stroke: #8bc34a;
}

svg:nth-child(12) {
  stroke: #cddc39;
}

svg:nth-child(13) {
  stroke: #ffeb3b;
}

svg:nth-child(14) {
  stroke: #ffc107;
}

svg:nth-child(15) {
  stroke: #ff9800;
}

svg:nth-child(16) {
  stroke: #ff5722;
}

svg:nth-child(17) {
  stroke: #795548;
}

svg:nth-child(18) {
  stroke: #9e9e9e;
}

svg:nth-child(19) {
  stroke: #607d8b;
}

<div class="material_block">
  <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"><circle class="circle" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle></svg>
  <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"><circle class="circle" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle></svg>
  <!-- Add more SVG elements here as needed -->
</div>

Pure CSS implementation of a loader animation

Answer №1

Answer №2

Answer №3

Similar questions

Resolve the issue of text overflow in PrimeNG Turbo Table cells

How to extract a div from its parent using jQuery

Achieve a sleek, modern look by using CSS to add a border with crisp square

Guide on positioning two background images next to each other on a page?

Enhancing CSS to create a more visually appealing loading spinner

Using CSS background-image URL in .NET MVC tutorials

Leverage the power of Sass styles throughout your Vue.js project

Is there a way to make a sass file universally accessible without having to import it into every file and causing an increase in bundle size?

css hover function not operational with back to top button

Tips for keeping the footer consistently at the bottom of the page without using a fixed position (to avoid overlapping with the main content)

Access information from multiple div elements using JavaScript data-attributes

I attempted to craft a toggle button by applying and removing an active class that I had previously designed, but unfortunately, it did not function as intended

Instructions for sketching a square at predetermined coordinates

A guide on rotating loaders and inserting custom text within loaders using CSS

Could the difficulty in clicking the first entry in Firefox be a bug?

What is the technique to enable this div to be clickable?

Why does Javascript Tic-Tac-Toe delay notifying the user until the entire board is full?

Tips for aligning an image on top of another image

How can a CSS class be used to toggle the visibility of a DIV element with JavaScript?

Modifying the weight of fonts in TVML components