Gusano Loader: кубик Рубика на страже загрузки!

Каждый сайт заслуживает стильного прелоадера, который удивит и удержит внимание пользователя. Gusano Loader — это уникальное решение, вдохновлённое движением кубика Рубика.

Анимация, созданная с помощью CSS поражает своей плавностью и изяществом. Прелоадер выглядит динамично, но при этом не перегружает интерфейс. Он идеально подойдёт для современных проектов, которым требуется яркий и запоминающийся элемент.

Сделайте ожидание загрузки интересным! Gusano Loader добавит интерактивности вашему сайту и точно вызовет улыбку у пользователей.

See the Pen Gusano loader by Olli Eterma (@illo) on CodePen.

        HTML

  
  Показать код HTML
  
    
  <div class="loader">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

        CSS
 
  
  Показать код CSS
  
         
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(45deg);
  width: 70px;
  height: 70px;
}
.loader > div {
  position: absolute;
  top: 0px;
  left: 0px;
  display: inline-block;
  width: 20px;
  height: 20px;
  transform: translate(0px, 0px);
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-direction: normal;
  animation-timing-function: cubic-bezier(0.75, 0, 0, 0.75);
}
.loader > div:before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: #1abc9c;
  border-radius: 3px;
  animation-name: background;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: ease-in-out;
}
.loader > div:nth-child(1) {
  animation-delay: -1s;
  transform: translate(0px, 25px);
  animation-name: position1;
}
.loader > div:nth-child(2) {
  animation-delay: -2s;
  transform: translate(0px, 50px);
  animation-name: position2;
}
.loader > div:nth-child(3) {
  animation-delay: -3s;
  transform: translate(25px, 50px);
  animation-name: position3;
}
.loader > div:nth-child(4) {
  animation-delay: -4s;
  transform: translate(25px, 25px);
  animation-name: position4;
}
.loader > div:nth-child(5) {
  animation-delay: -5s;
  transform: translate(50px, 25px);
  animation-name: position5;
}
.loader > div:nth-child(6) {
  animation-delay: -6s;
  transform: translate(50px, 0px);
  animation-name: position6;
}
.loader > div:nth-child(7) {
  animation-delay: -7s;
  transform: translate(25px, 0px);
  animation-name: position7;
}
 
@keyframes position1 {
  0% {
    transform: translate(0px, 25px);
  }
  5% {
    transform: translate(0px, 25px);
  }
  12.5% {
    transform: translate(0px, 0px);
  }
  17.5% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(25px, 0px);
  }
  30% {
    transform: translate(25px, 0px);
  }
  37.5% {
    transform: translate(50px, 0px);
  }
  42.5% {
    transform: translate(50px, 0px);
  }
  50% {
    transform: translate(50px, 25px);
  }
  55% {
    transform: translate(50px, 25px);
  }
  62.5% {
    transform: translate(25px, 25px);
  }
  67.5% {
    transform: translate(25px, 25px);
  }
  75% {
    transform: translate(25px, 50px);
  }
  80% {
    transform: translate(25px, 50px);
  }
  87.5% {
    transform: translate(0px, 50px);
  }
  92.5% {
    transform: translate(0px, 50px);
  }
  100% {
    transform: translate(0px, 25px);
  }
  105% {
    transform: translate(0px, 25px);
  }
}
@keyframes position2 {
  0% {
    transform: translate(0px, 25px);
  }
  5% {
    transform: translate(0px, 25px);
  }
  12.5% {
    transform: translate(0px, 0px);
  }
  17.5% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(25px, 0px);
  }
  30% {
    transform: translate(25px, 0px);
  }
  37.5% {
    transform: translate(50px, 0px);
  }
  42.5% {
    transform: translate(50px, 0px);
  }
  50% {
    transform: translate(50px, 25px);
  }
  55% {
    transform: translate(50px, 25px);
  }
  62.5% {
    transform: translate(25px, 25px);
  }
  67.5% {
    transform: translate(25px, 25px);
  }
  75% {
    transform: translate(25px, 50px);
  }
  80% {
    transform: translate(25px, 50px);
  }
  87.5% {
    transform: translate(0px, 50px);
  }
  92.5% {
    transform: translate(0px, 50px);
  }
  100% {
    transform: translate(0px, 25px);
  }
  105% {
    transform: translate(0px, 25px);
  }
}
@keyframes position3 {
  0% {
    transform: translate(0px, 25px);
  }
  5% {
    transform: translate(0px, 25px);
  }
  12.5% {
    transform: translate(0px, 0px);
  }
  17.5% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(25px, 0px);
  }
  30% {
    transform: translate(25px, 0px);
  }
  37.5% {
    transform: translate(50px, 0px);
  }
  42.5% {
    transform: translate(50px, 0px);
  }
  50% {
    transform: translate(50px, 25px);
  }
  55% {
    transform: translate(50px, 25px);
  }
  62.5% {
    transform: translate(25px, 25px);
  }
  67.5% {
    transform: translate(25px, 25px);
  }
  75% {
    transform: translate(25px, 50px);
  }
  80% {
    transform: translate(25px, 50px);
  }
  87.5% {
    transform: translate(0px, 50px);
  }
  92.5% {
    transform: translate(0px, 50px);
  }
  100% {
    transform: translate(0px, 25px);
  }
  105% {
    transform: translate(0px, 25px);
  }
}
@keyframes position4 {
  0% {
    transform: translate(0px, 25px);
  }
  5% {
    transform: translate(0px, 25px);
  }
  12.5% {
    transform: translate(0px, 0px);
  }
  17.5% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(25px, 0px);
  }
  30% {
    transform: translate(25px, 0px);
  }
  37.5% {
    transform: translate(50px, 0px);
  }
  42.5% {
    transform: translate(50px, 0px);
  }
  50% {
    transform: translate(50px, 25px);
  }
  55% {
    transform: translate(50px, 25px);
  }
  62.5% {
    transform: translate(25px, 25px);
  }
  67.5% {
    transform: translate(25px, 25px);
  }
  75% {
    transform: translate(25px, 50px);
  }
  80% {
    transform: translate(25px, 50px);
  }
  87.5% {
    transform: translate(0px, 50px);
  }
  92.5% {
    transform: translate(0px, 50px);
  }
  100% {
    transform: translate(0px, 25px);
  }
  105% {
    transform: translate(0px, 25px);
  }
}
@keyframes position5 {
  0% {
    transform: translate(0px, 25px);
  }
  5% {
    transform: translate(0px, 25px);
  }
  12.5% {
    transform: translate(0px, 0px);
  }
  17.5% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(25px, 0px);
  }
  30% {
    transform: translate(25px, 0px);
  }
  37.5% {
    transform: translate(50px, 0px);
  }
  42.5% {
    transform: translate(50px, 0px);
  }
  50% {
    transform: translate(50px, 25px);
  }
  55% {
    transform: translate(50px, 25px);
  }
  62.5% {
    transform: translate(25px, 25px);
  }
  67.5% {
    transform: translate(25px, 25px);
  }
  75% {
    transform: translate(25px, 50px);
  }
  80% {
    transform: translate(25px, 50px);
  }
  87.5% {
    transform: translate(0px, 50px);
  }
  92.5% {
    transform: translate(0px, 50px);
  }
  100% {
    transform: translate(0px, 25px);
  }
  105% {
    transform: translate(0px, 25px);
  }
}
@keyframes position6 {
  0% {
    transform: translate(0px, 25px);
  }
  5% {
    transform: translate(0px, 25px);
  }
  12.5% {
    transform: translate(0px, 0px);
  }
  17.5% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(25px, 0px);
  }
  30% {
    transform: translate(25px, 0px);
  }
  37.5% {
    transform: translate(50px, 0px);
  }
  42.5% {
    transform: translate(50px, 0px);
  }
  50% {
    transform: translate(50px, 25px);
  }
  55% {
    transform: translate(50px, 25px);
  }
  62.5% {
    transform: translate(25px, 25px);
  }
  67.5% {
    transform: translate(25px, 25px);
  }
  75% {
    transform: translate(25px, 50px);
  }
  80% {
    transform: translate(25px, 50px);
  }
  87.5% {
    transform: translate(0px, 50px);
  }
  92.5% {
    transform: translate(0px, 50px);
  }
  100% {
    transform: translate(0px, 25px);
  }
  105% {
    transform: translate(0px, 25px);
  }
}
@keyframes position7 {
  0% {
    transform: translate(0px, 25px);
  }
  5% {
    transform: translate(0px, 25px);
  }
  12.5% {
    transform: translate(0px, 0px);
  }
  17.5% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(25px, 0px);
  }
  30% {
    transform: translate(25px, 0px);
  }
  37.5% {
    transform: translate(50px, 0px);
  }
  42.5% {
    transform: translate(50px, 0px);
  }
  50% {
    transform: translate(50px, 25px);
  }
  55% {
    transform: translate(50px, 25px);
  }
  62.5% {
    transform: translate(25px, 25px);
  }
  67.5% {
    transform: translate(25px, 25px);
  }
  75% {
    transform: translate(25px, 50px);
  }
  80% {
    transform: translate(25px, 50px);
  }
  87.5% {
    transform: translate(0px, 50px);
  }
  92.5% {
    transform: translate(0px, 50px);
  }
  100% {
    transform: translate(0px, 25px);
  }
  105% {
    transform: translate(0px, 25px);
  }
}
@keyframes position8 {
  0% {
    transform: translate(0px, 25px);
  }
  5% {
    transform: translate(0px, 25px);
  }
  12.5% {
    transform: translate(0px, 0px);
  }
  17.5% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(25px, 0px);
  }
  30% {
    transform: translate(25px, 0px);
  }
  37.5% {
    transform: translate(50px, 0px);
  }
  42.5% {
    transform: translate(50px, 0px);
  }
  50% {
    transform: translate(50px, 25px);
  }
  55% {
    transform: translate(50px, 25px);
  }
  62.5% {
    transform: translate(25px, 25px);
  }
  67.5% {
    transform: translate(25px, 25px);
  }
  75% {
    transform: translate(25px, 50px);
  }
  80% {
    transform: translate(25px, 50px);
  }
  87.5% {
    transform: translate(0px, 50px);
  }
  92.5% {
    transform: translate(0px, 50px);
  }
  100% {
    transform: translate(0px, 25px);
  }
  105% {
    transform: translate(0px, 25px);
  }
}
@keyframes background {
  10% {
    background-color: #9b59b6;
  }
  20% {
    background-color: #2980b9;
  }
  30% {
    background-color: #c0392b;
  }
  40% {
    background-color: #16a085;
  }
  50% {
    background-color: #f39c12;
  }
  60% {
    background-color: #27ae60;
  }
  70% {
    background-color: #419fdd;
  }
  80% {
    background-color: #f1c40f;
  }
  90% {
    background-color: #1abc9c;
  }
}
.reference {
  position: absolute;
  bottom: 10px;
  right: 10px;
  height: 40px;
  padding: 6px 5px 5px 40px;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: #ea4c89;
  font-family: helvetica;
  font-weight: bold;
  transition: all 0.2s ease-out;
}
.reference:hover {
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
  border-color: rgba(234, 76, 137, 0.5);
}
.reference:before {
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  width: 40px;
  height: 40px;
  background-image: url(https://d13yacurqjgara.cloudfront.net/assets/dribbble-ball-dnld-35eba27acd4710f90ea9aa7ad8037fbb19ad997078531844fd34456b4c6551e4.png);
  background-size: 60px;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 3px;
}
.reference .author {
  color: #2d3237;
  font-size: 12px;
  font-weight: normal;
}