ZorNet.Ru — сайт для вебмастера » HTML и CSS » Красивая и простая загрузка с помощью CSS3

Красивая и простая загрузка с помощью CSS3

Это красиво спроектированный погрузчик, загружающий текст в центр и округлые, красочные линии, вращающиеся вокруг угла на 360 градусов, чтобы создать замкнутый круг. Вращение линий начинается медленно, а затем быстро перемещается, чтобы закончить круг. Код CSS также очень прост и понятен. Он использует правила @keyframe и вращает свойства для поворота строк, чтоб можно было совершить полный оборот. Эта анимация также основана на CSS и использует расширенные функции SCSS для создания этой потрясающей анимации в CSS. Он использует свойство transform для поворота круга и соединения точек.

Загрузочный счетчик, это визуальный индикатор того, что что-то происходит на странице. Возможно с несколькими строками JavaScript и небольшой дополнительной разметкой HTML мы можем гарантировать, что пользователям у которых есть нарушения зрения, сообщается, что что-то происходит и когда задача завершена. Мы собираемся использовать анимацию CSS, чтобы наш круг вращался вокруг. Я лично считаю, что синтаксис анимации сложно запомнить, поэтому я использовал MDN в качестве моего справочного руководства.

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

HTML

Код

<center><br><br><br>
<div class="kexamples_rogressbars" id="kexamples_rogressbars"></div>
<div class="kexamples_rogressbars" id="kexamples_rogressbars2"></div>
<div class="kexamples_rogressbars" id="kexamples_rogressbars3"></div>
<div class="kexamples_rogressbars" id="kexamples_rogressbars4"></div>
<span id="zukolas">ЗАГРУЗКА...</span><br>

CSS

Код

.kexamples_rogressbars{
  border:3px solid #d6336c;
  width:197px;
  height:197px;
  border-radius:50%;
  border-left-color: transparent;
  border-right-color: transparent;
  animation:rotate 2s cubic-bezier(0.26, 1.36, 0.74,-0.29) infinite;
}
#kexamples_rogressbars2{
  border:3px solid #3bc9db;
  width:220px;
  height:220px;
  position:relative;
  top:-216px;
  border-left-color: transparent;
  border-right-color: transparent;
  animation:rotate2 2s cubic-bezier(0.26, 1.36, 0.74,-0.29) infinite;
}
#kexamples_rogressbars3{
  border:3px solid #d6336c;
  width:240px;
  height:240px;
  position:relative;
  top:-452px;
  border-left-color: transparent;
  border-right-color: transparent;
  animation:rotate 2s cubic-bezier(0.26, 1.36, 0.74,-0.29) infinite;
}
#kexamples_rogressbars4{
  border:3px solid #3bc9db;
  width:260px;
  height:260px;
  position:relative;
  top:-708px;
  border-left-color: transparent;
  border-right-color: transparent;
  animation:rotate2 2s cubic-bezier(0.26, 1.36, 0.74,-0.29) infinite;
}
@keyframes rotate{
  0%{transform:rotateZ(-360deg)}
  100%{transform:rotateZ(0deg)}
}
@keyframes rotate2{
  0%{transform:rotateZ(360deg)}
  100%{transform:rotateZ(0deg)}
}
#zukolas{
  color:white;
  font-family:Arial;
  font-size:19px;
  position:relative;
  top:-861px;
}

Но в нашем случай все создано на чистых стилях. Теперь у вас есть гибкий CSS для создания анимированного загрузчика. С несколькими атрибутами HTML и некоторой копией мы смогли убедиться, что как можно больше пользователей будут проинформированы о загрузке вашего контента и загрузке.

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

27 Июля 2018 Просмотров: 894 Комментариев: (0)

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

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

Kosten

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