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

Анимация экрана загрузки Skeleton на CSS

Анимация экрана загрузки Skeleton на CSS
Если не ошибаюсь в название, то это скелетная анимация экрана загрузки с использованием только HTML и CSS, что появляется при загрузке страницы. Сам каркас экрана для загрузки, то это пользовательский интерфейс, который по сути не имеет фактически никакого содержания. Вместо этого происходит красивая анимация страниц сайта, где происходит показ данных элементов в форме. Где можно наблюдать фактически скелет содержимому, в тот момент, когда происходит загрузка.

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

Так выглядит при установочном процессе:

Красивый дизайн загрузки страниц сайта

Установка:

HTML

Код
<div class="nading_cukan">
  <div class="zagolovok">
  <div class="img"></div>
  <div class="specation">
  <span class="name"></span>
  <span class="about"></span>
  </div>
  </div>
  <div class="description">
  <div class="string string-1"></div>
  <div class="string string-2"></div>
  <div class="string string-3"></div>
  </div>
  <div class="skeleton">
  <div class="kutal kutal-1"></div>
  <div class="kutal kutal-2"></div>
  </div>
  </div>

CSS

Код
.nading_cukan {
  max-width: 348px;
  width: 100%;
  background: #eae6e6;
  padding: 30px;
  border-radius: 10px;
  border: 1px solid #c3c1c1;
}
.nading_cukan .zagolovok{
  display: flex;
  align-items: center;
}
.zagolovok .img{
  height: 75px;
  width: 75px;
  background: #d9d9d9;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
.zagolovok .specation{
  margin-left: 20px;
}
.specation span{
  display: block;
  background: #d9d9d9;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.specation .name{
  height: 15px;
  width: 100px;
}
.specation .about{
  height: 13px;
  width: 150px;
  margin-top: 10px;
}
.nading_cukan .description{
  margin: 25px 0;
}
.description .string{
  background: #d9d9d9;
  border-radius: 10px;
  height: 13px;
  margin: 10px 0;
  overflow: hidden;
  position: relative;
}
.description .string-1{
  width: calc(100% - 15%);
}
.description .string-3{
  width: calc(100% - 40%);
}
.nading_cukan .skeleton{
  display: flex;
}
.nading_cukan .skeleton .kutal {
  height: 52px;
  width: 100%;
  background: #dcdbdb;
  border-radius: 32px;
  position: relative;
  overflow: hidden;
}
.skeleton .kutal-1{
  margin-right: 8px;
}
.skeleton .kutal-2{
  margin-left: 8px;
}
.zagolovok .img::before,
.specation span::before,
.description .string::before,
.skeleton .kutal::before{
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, #cecbcb 0%, rgba(0,0,0,0.05) 20%, #d2cfcf 40%, #d9d9d9 100%);
  background-repeat: no-repeat;
  background-size: 448px 398px;
  animation: shimmer 1s linear infinite;
}
.zagolovok .img::before{
  background-size: 648px 612px;
}
.specation span::before{
  animation-delay: 0.2s;
}
.skeleton .kutal-2::before{
  animation-delay: 0.22s;
}
@keyframes shimmer {
  0%{
  background-position: -450px 0;
  }
  100%{
  background-position: 450px 0;
  }
}

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

Демонстрация
2021-09-27 Загрузок: 1 Просмотров: 336 Комментарий: (0)

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

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

Оставь свой отзыв

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