[ CSS loading icon ] Windows 로딩 아이콘

Windows 에서 종종 봐왔던 로딩 애니메이션을 css 로 한번 비슷하게 만들어보았습니다. 위 GIF 이미지는 속도가 좀 느려 보이는데, 실제 적용하면 저것 보단 빠르게 동작합니다. ㅎㅎ; 아래 html 과 css 코드를 공유합니다.

 

html

<div class="loading-icon">
  <div>
    <div>
      <div><div></div></div>
      <div><div></div></div>
      <div><div></div></div>
      <div><div></div></div>
      <div><div></div></div>
      <div><div></div></div>
    </div>
  </div>
</div>

 

css

.loading-icon {
  /* variables */
  --main-size: 40px;
  --item-color: #000000;

  width: var(--main-size);
  height: var(--main-size);
  display: inline-block;
  position: relative;
}
.loading-icon > div {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-icon > div > div {
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  position: absolute;
  --this-deg: 0deg;
  transform: rotate(var(--this-deg));
  animation: loading-icon-div-body-animation 5s linear 0ms infinite normal both;
}
.loading-icon > div > div > div {
  width: 0;
  height: 0;
  --circle-width: calc(var(--main-size) / 7);
  --circle-height: calc(var(--main-size) / 7);
}
.loading-icon > div > div > div > div {
  width: var(--circle-width);
  height: var(--circle-height);
  display: block;
  background-color: var(--item-color);
  border-radius: calc(var(--main-size) * 10);
  position: absolute;
  top: calc(var(--circle-height) / -2);
  left: calc(var(--circle-width) / -2);
  transform: translateY(calc((var(--main-size) / -2) + calc(var(--circle-width) / 2)))
}

.loading-icon > div > div > div:nth-child(1) {
  --this-deg: 0deg;
  transform: rotate(var(--this-deg));
  animation: loading-icon-div-animation 3s cubic-bezier(.17,.67,.45,.99) 500ms infinite normal both, loading-icon-div-opacity-animation 6s cubic-bezier(.17,.67,.45,.99) 700ms infinite normal both;
}
.loading-icon > div > div > div:nth-child(2) {
  --this-deg: 30deg;
  transform: rotate(var(--this-deg));
  animation: loading-icon-div-animation 3s cubic-bezier(.17,.67,.45,.99) 440ms infinite normal both, loading-icon-div-opacity-animation 6s cubic-bezier(.17,.67,.45,.99) 580ms infinite normal both;
}
.loading-icon > div > div > div:nth-child(3) {
  --this-deg: 60deg;
  transform: rotate(var(--this-deg));
  animation: loading-icon-div-animation 3s cubic-bezier(.17,.67,.45,.99) 360ms infinite normal both, loading-icon-div-opacity-animation 6s cubic-bezier(.17,.67,.45,.99) 450ms infinite normal both;
}
.loading-icon > div > div > div:nth-child(4) {
  --this-deg: 90deg;
  transform: rotate(var(--this-deg));
  animation: loading-icon-div-animation 3s cubic-bezier(.17,.67,.45,.99) 260ms infinite normal both, loading-icon-div-opacity-animation 6s cubic-bezier(.17,.67,.45,.99) 310ms infinite normal both;
}
.loading-icon > div > div > div:nth-child(5) {
  --this-deg: 120deg;
  transform: rotate(var(--this-deg));
  animation: loading-icon-div-animation 3s cubic-bezier(.17,.67,.45,.99) 140ms infinite normal both, loading-icon-div-opacity-animation 6s cubic-bezier(.17,.67,.45,.99) 160ms infinite normal both;
}
.loading-icon > div > div > div:nth-child(6) {
  --this-deg: 150deg;
  transform: rotate(var(--this-deg));
  animation: loading-icon-div-animation 3s cubic-bezier(.17,.67,.45,.99) 0ms infinite normal both, loading-icon-div-opacity-animation 6s cubic-bezier(.17,.67,.45,.99) 0ms infinite normal both;
}

@keyframes loading-icon-div-body-animation {
  0% {
    transform: rotate(var(--this-deg));
  } 
  100% {
    transform: rotate(calc(var(--this-deg) + 360deg));
  }
}
@keyframes loading-icon-div-animation {
  0% {
    transform: rotate(var(--this-deg));
  }
  50% {
    transform: rotate(calc(var(--this-deg) + 180deg));
  }
  100% {
    transform: rotate(calc(var(--this-deg) + 360deg));
  }
}
@keyframes loading-icon-div-opacity-animation {
  0% {
    opacity: 1;
  }
  53% {
    opacity: 1;
  }
  54% {
    opacity: 0; 
  }
  75% {
    opacity: 0;
  }
  76% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

--main-size : 로딩 아이콘의 너비, 높이를 조정하실 수 있습니다.

--item-color : 로딩 아이콘 요소들의 색상을 조정하실 수 있습니다.