ZorNet.Ru — сайт для вебмастера » HTML и CSS » Простая анимация загрузки для сайта на CSS

Простая анимация загрузки для сайта на CSS

Очередной оригинальный пример на классную загрузку страницы, что полностью выполнена на чистых стилях, где привлечены шрифтовые кнопки. Теперь веб мастер может быстро подобрать то изображение, что будет соответствовать его тематике, или которое ему понравится. Так как шрифтовые иконки предполагают под собой, просто огромный выбор различного изображение. Здесь вы прописываем класс, также если нужно, то меняем палитра цвета. Из анимации, то у нас идет нижнее полоса, которая будет ездить по правую и по левую сторону, что полностью редактируется в стилистике.

Это гамма, также есть возможность изначально задать скорость, где все очень просто и доступно в понимание, как можно самостоятельно сменить или выставить параметры, что сам веб мастер может, что то свое привнести, чтоб было оригинально. По сути, происходит замена картинки, что предлагает Font Awesome, для получения проверки скорости интернет соединение, в нашем случай открытие страницы.. Progress должен реализовать страницу для загрузки в зависимости от объема этой скорости Здесь не как не нужно забывать про замену кнопки, что просто меняем класс в самом коде, где автоматически меняется картинка.

Проверял на работоспособность, где ниже будет ссылка на Demo страницу.

Прелоадер сайта своими руками

Приступаем к установке:

HTML

Код

CSS

Код

.tasubscripti-onugaming {
  background: #eaeaea;
  background-size: cover;
  vertical-align: middle;
  margin: 7% auto;
  width: 148px;
height: 0px;
}

.tukigsa {
  display: block;
  font-size: 5em;
  text-align: center;
  color: #1173a7;
}

.pastukzalosun {
  height: 4px;
  width: 100%;
  background: #f3f1f1;
  margin-top: 17%;
  }

.gkientudsam {
  width: 100%;
  height: inherit;
  background: #196e9a;
  animation: slide 3s ease-in-out infinite;
}

@keyframes slide{
  0%{
  transform-origin: left;
  transform: scalex(0.3);
  }
12.5%{
transform-origin: left;
transform: scalex(0.2);
}
  25%{
  transform-origin: left;
  transform: scalex(1);
  }
  26%{
  transform-origin: right;
  transform: scalex(1);
  }
  50%{
  transform-origin: right;
  transform: scalex(0.3);
  }
62.5%{
transform-origin: right;
transform: scalex(0.2);
}
  75%{
  transform-origin: right;
  transform: scalex(1);
  }
  76%{
  transform-origin: left;
  transform: scalex(1);
  }
  100%{
  transform-origin: left;
  transform: scalex(0.3);
  }
}

Демонстрация

Теперь есть возможность, это подключить к любой части часть вашего сайта с фантазиям эффектом переходов CSS3.

11 Августа 2018 Просмотров: 1550 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0