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

Круглый индикатор CSS загрузки для сайта

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

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

Так preloaders выглядит в реальности, где ниже ссылка на demo страницу.

HTML

Код

<div class="provaydes-kagruzka">
Загрузка
<span></span>
</div>

CSS

Код

.provaydes-kagruzka {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  text-align: center;
  background: rgba(0, 0, 0, 0);
  border: 3px solid #5f5a5a;
  border-radius: 50%;
  line-height: 155px;
  font-family: sans-serif;
  font-size: 20px;
  color: #e26615;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 0 10px #ea8933;
  box-shadow: 0 0 20px rgba(16, 16, 16, 0.5);
}

.provaydes-kagruzka:before {
  content: '';
  position: absolute;
  top:-2px;
  left:-2px;
  width:100%;
  height:100%;
  border: 3px solid transparent;
  border-top: 3px solid #e67e22;
  border-right: 3px solid #e67e22;
  border-radius:50%;
  animation: animateCircle 2s linear infinite;
}

span {
  display: block;
  position:absolute;
  top: calc(50% - 2px);
  left:50%;
  width:50%;
  height:4px;
  background: transparent;
  transform-origin: left;
  animation: animate 2s linear infinite;
}

span:before {
  content: '';
  position:absolute;
  width:16px;
  height:16px;
  border-radius: 50%;
  background: #e67e22;
  top: -6px;
  right: -8px;
  box-shadow: 0 0 20px #e67e22;
}

@keyframes animateCircle {
  0% {
  transform: rotate(0deg);
  }
  100% {
  transform: rotate(360deg);
  }
}

@keyframes animate {
  0% {
  transform: rotate(45deg);
  }
  100% {
  transform: rotate(405deg);
  }
}

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

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

16 Августа 2019 Загрузок: 5 Просмотров: 2042 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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