순수 CSS 로더

37330 단어 css animation beginners

간단한 CSS 전용 로더. 그냥 span과 css 애니메이션을 사용합니다. 배경을 교체하여 색상을 업데이트할 수 있습니다.

HTML/퍼그

HTML

<div class="loader">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Pug

.loader
  - for (var i = 1; i <= 17; i++) 
    span

CSS/SCSS

CSS

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}
.loader span {
  margin: 2px;
  display: block;
  background: #ff6800;
  width: 10px;
  border-radius: 10px;
}
.loader span:nth-child(1) {
  -webkit-animation: grow_shrink 2s ease-in-out -4s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -4s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -4s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -4s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(2) {
  -webkit-animation: grow_shrink 2s ease-in-out -3.75s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -3.75s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -3.75s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -3.75s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(3) {
  -webkit-animation: grow_shrink 2s ease-in-out -3.5s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -3.5s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -3.5s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -3.5s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(4) {
  -webkit-animation: grow_shrink 2s ease-in-out -3.25s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -3.25s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -3.25s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -3.25s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(5) {
  -webkit-animation: grow_shrink 2s ease-in-out -3s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -3s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -3s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -3s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(6) {
  -webkit-animation: grow_shrink 2s ease-in-out -2.75s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -2.75s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -2.75s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -2.75s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(7) {
  -webkit-animation: grow_shrink 2s ease-in-out -2.5s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -2.5s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -2.5s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -2.5s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(8) {
  -webkit-animation: grow_shrink 2s ease-in-out -2.25s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -2.25s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -2.25s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -2.25s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(9) {
  -webkit-animation: grow_shrink 2s ease-in-out -2s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -2s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -2s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -2s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(10) {
  -webkit-animation: grow_shrink 2s ease-in-out -1.75s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -1.75s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -1.75s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -1.75s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(11) {
  -webkit-animation: grow_shrink 2s ease-in-out -1.5s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -1.5s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -1.5s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -1.5s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(12) {
  -webkit-animation: grow_shrink 2s ease-in-out -1.25s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -1.25s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -1.25s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -1.25s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(13) {
  -webkit-animation: grow_shrink 2s ease-in-out -1s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -1s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -1s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -1s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(14) {
  -webkit-animation: grow_shrink 2s ease-in-out -0.75s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -0.75s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -0.75s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -0.75s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(15) {
  -webkit-animation: grow_shrink 2s ease-in-out -0.5s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -0.5s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -0.5s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -0.5s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(16) {
  -webkit-animation: grow_shrink 2s ease-in-out -0.25s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out -0.25s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out -0.25s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out -0.25s infinite;
  /* IE 10+, Fx 29+ */
}
.loader span:nth-child(17) {
  -webkit-animation: grow_shrink 2s ease-in-out 0s infinite;
  /* Safari 4+ */
  -moz-animation: grow_shrink 2s ease-in-out 0s infinite;
  /* Fx 5+ */
  -o-animation: grow_shrink 2s ease-in-out 0s infinite;
  /* Opera 12+ */
  animation: grow_shrink 2s ease-in-out 0s infinite;
  /* IE 10+, Fx 29+ */
}

@-webkit-keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}
@-moz-keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}
@-o-keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}
@keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}

SCSS

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
body {
  height:100vh;
  @include flex-center;
}
.loader {
  @include flex-center;
  height: 40px;
  span {
    margin: 2px;
    display: block;
    background: #ff6800;
    width: 10px;
    border-radius: 10px;
  }
  @for $i from 1 through 17 {
    span:nth-child(#{$i}) {
      -webkit-animation: grow_shrink
        2s
        ease-in-out
        (-0.25s * (17-$i))
        infinite; /* Safari 4+ */
      -moz-animation: grow_shrink
        2s
        ease-in-out
        (-0.25s * (17-$i))
        infinite; /* Fx 5+ */
      -o-animation: grow_shrink
        2s
        ease-in-out
        (-0.25s * (17-$i))
        infinite; /* Opera 12+ */
      animation: grow_shrink
        2s
        ease-in-out
        (-0.25s * (17-$i))
        infinite; /* IE 10+, Fx 29+ */
    }
  }
}

@-webkit-keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}
@-moz-keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}
@-o-keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}
@keyframes grow_shrink {
  0% {
    height: 0px;
  }
  50% {
    height: 40px;
  }
  100% {
    height: 1px;
  }
}

그게 다야.

여기에서 작업 데모를 확인할 수 있습니다. Codepen .

Reference

이 문제에 관하여(순수 CSS 로더), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/raghavbhardwaj/pure-css-loader-367f

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

호버 효과가 있는 네온 버튼

CSS 전용 스피너 로더

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다