Skip to content
pbthang

Array Rotation Loader

Create an “array rotation” loading animation using HTML, TailwindCSS, and CSS.

Demo

Loading...

Code

index.html
1
<div>
2
  <div class="loader relative flex gap-[8px] translate-x-[-9px]">
3
    <span class="block w-[10px] h-[10px] bg-current rounded-full animate-[move_1s_linear_infinite]"></span>
4
    <span class="block w-[10px] h-[10px] bg-current rounded-full animate-[move_1s_linear_infinite]"></span>
5
    <span class="block w-[10px] h-[10px] bg-current rounded-full animate-[move_1s_linear_infinite]"></span>
6
    <span class="block w-[10px] h-[10px] bg-current rounded-full animate-[move_1s_linear_infinite]"></span>
7
    <span class="block w-[10px] h-[10px] bg-current rounded-full animate-[jump_1s_ease_infinite]"></span>
8
  </div>
9
  <div class="">Loading...</div>
10
</div>
11


12
<style>
13
  @keyframes move {
14
    0% {
15
      transform: translateX(0);
16
    }
17
    100% {
18
      transform: translateX(19px);
19
    }
20
  }
21


22
  @keyframes jump {
23
    0% {
24
      transform: translate(0, 0);
25
    }
26
    30% {
27
      transform: translate(0px, -30px);
28
    }
29
    70% {
30
      transform: translate(-72px, -30px);
31
    }
32
    100% {
33
      transform: translate(-72px, 0px);
34
    }
35
  }
36
</style>

Prerequisites

TailwindCSS is required to use the code snippet above.

Steps

  1. Create an html skeleton as follows:

    <div>
      <div class="loader relative flex gap-[8px] translate-x-[-9px]">
        <!-- Each span represents a dot -->
        <span class="block w-[10px] h-[10px] bg-current rounded-full"></span>
        <span class="block w-[10px] h-[10px] bg-current rounded-full"></span>
        <span class="block w-[10px] h-[10px] bg-current rounded-full"></span>
        <span class="block w-[10px] h-[10px] bg-current rounded-full"></span>
        <span class="block w-[10px] h-[10px] bg-current rounded-full"></span>
      </div>
      <div class="">Loading...</div>
    </div>

  2. Create the following keyframes to animate the dots:

    @keyframes move {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(19px);
      }
    }
    

    @keyframes jump {
      0% {
        transform: translate(0, 0);
      }
      30% {
        transform: translate(0px, -30px);
      }
      70% {
        transform: translate(-72px, -30px);
      }
      100% {
        transform: translate(-72px, 0px);
      }
    }

    move keyframes will move a dot to the right, and jump keyframes will make a dot jump to the front.

  3. Add the animation to the dots:

    <!-- Each span represents a dot -->
    <span
      class="block w-[10px] h-[10px] bg-current rounded-full animate-[move_1s_linear_infinite]"
    >
    </span>
    <span
      class="block w-[10px] h-[10px] bg-current rounded-full animate-[move_1s_linear_infinite]"
    >
    </span>
    <span
      class="block w-[10px] h-[10px] bg-current rounded-full animate-[move_1s_linear_infinite]"
    >
    </span>
    <span
      class="block w-[10px] h-[10px] bg-current rounded-full animate-[move_1s_linear_infinite]"
    >
    </span>
    <span
      class="block w-[10px] h-[10px] bg-current rounded-full animate-[jump_1s_ease_infinite]"
    >
    </span>

    Please note that the first four dots will have the move animation with a linear timing function, and the last dot will have the jump animation with an ease timing function.

  4. You should now have a “array rotation” loading animation.