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

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

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

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

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

Установка:

HTML

Код

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;
  }
}

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

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

27 Сентября 2021 Загрузок: 3 Просмотров: 2187 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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