Индикатор загрузки для сайта

Урок посвящён созданию оригинального индикатора загрузки для сайта с использованием простых css-фигур и анимации, базирующейся на трансформации элементов. Такой индикатор можно использовать для свадебного сайта, сайта ресторана или интернет-магазина алкогольных напитков.

Находить новые идеи не сложно. Нужно быть лишь чуточку внимательней к окружающему нас миру. И как приятно видеть привычные вещи, воссозданные на экране с помощью HTML и CSS.

See the Pen wineshop loader by Elena Nazarova (@nazarelen) on CodePen.

<div class="loader">
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div class="wineglass left">
    <div class="top"></div>
  </div>
  <div class="wineglass right">
    <div class="top"></div>
  </div>
</div>

Для сглаживания неровности краёв при движении добавим элементам тень такого же цвета, что и сами элементы. Напиток внутри бокала сделан в виде круга с градиентом, одна половина прозрачная, другая — цветная. Ножку и подставку бокала сместим на 1px, чтобы при движении не образовывался промежуток между элементами.

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #C4D9EB;
}
.wineglass {
  height: 36px;
  position: relative;
}
.wineglass:after {
  content: ''; 
  position: absolute;
  top: 47px;
  left: 5px;
  width: 20px;
  height: 5px;
  background: white;
  box-shadow: 0 0 1px white;
}
.top {
  background: white;
  width: 30px;
  height: 36px;
  border-radius: 0 0 36px 36px;
  box-shadow: 0 0 1px white;
}
.top:before {
  content: ''; 
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(transparent 50%, #F36E3E 50%);
}
.left .top:before {
  animation: rotate2 2s linear infinite;
}
.right .top:before {
  animation: rotate1 2s linear infinite;
}
.top:after {
  content: ''; 
  position: absolute;
  top: 35px;
  left: 12px;
  width: 6px;
  height: 13px;
  background: white;
  box-shadow: 0 0 1px white;
}
.left {
  display: inline-block;
  margin-right: 10px;
  animation: rotate1 2s cubic-bezier(.39,1.52,.46,.92) infinite;
}
.right {
  display: inline-block;
  animation: rotate2 2s cubic-bezier(.39,1.52,.46,.92) infinite;
}
@keyframes rotate1{
  0% {transform: rotate(0deg);}
  50% {transform:rotate(22deg);}
}
@keyframes rotate2{
  0% {transform:rotate(0deg);}
  50% {transform:rotate(-22deg);}
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 70px;
  height: 25px;
  position: relative;
  opacity: 0;
  animation: 2s fadeInUp infinite linear 2s;
}
li {
  width: 6px;
  height: 15px;
  background: white;
  position: absolute;
  box-shadow: 0 0 1px white;
  transform-origin: bottom;
}
li:nth-child(1) {
  left: 26px;
  bottom: 5px;
  transform: rotate(-35deg);
}
li:nth-child(2) {
  left: 34px;
  bottom: 8px;
}
li:nth-child(3) {
  left: 42px;
  bottom: 5px;
  transform: rotate(35deg);
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: scaleY(1);
  }
  33% {
    opacity: 1;
    transform: scaleY(1.4);
  }
  64% {
     opacity: .1;
     transform: scaleY(1);
  }
  100% { 
    opacity: 0;
    transform: scaleY(.3);
  }
}