Главная » CSS

Чистый загрузчик CSS

На чтение 6 мин. Просмотров 48 Опубликовано

Простой загрузчик только 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>
Вход в полноэкранный режим Выход из полноэкранного режима

Мопс

.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.

Оцените статью
devanswers.ru
Добавить комментарий