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

Заполнитель загрузки материалов Facebook на CSS

Вероятно многие заметили, что после обновление на Facebook, появился необычный загрузчик страниц или заполнитель, что появляется на время. Что стало интересно, возможно уже кто-то в сети интернет создал, что-то подобное по стилистике, что реально есть похожий формат. Если ближе к сути, то здесь предоставлен похожий дизайн, где было изначально изменено кардинально несколько вещей, чтобы было легче увидеть. Где также был добавлен необычный и в своем стиле анимированный фон, который еще является градиентом CSS.

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

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

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

HTML

Код

CSS

Код

.anudothero-msociconte {
  background: #fff;
  border: 1px solid;
  border-color: #e5e6e9 #dfe0e4 #d0d1d5;
  border-radius: 3px;
  padding: 12px;

  margin: 0 auto;
  max-width: 472px;
  min-height: 200px;
}

@keyframes placeHolderShimmer{
  0%{
  background-position: -468px 0
  }
  100%{
  background-position: 468px 0
  }
}

.embedounu-bevideosanim {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
  height: 96px;
  position: relative;
}

.temptingto-becomema {
  background: #fff;
  position: absolute;
}

/* Every thing below this is just positioning */

.temptingto-becomema.header-top,
.temptingto-becomema.header-bottom,
.temptingto-becomema.subheader-bottom {
  top: 0;
  left: 40px;
  right: 0;
  height: 10px;
}

.temptingto-becomema.header-left,
.temptingto-becomema.subheader-left,
.temptingto-becomema.header-right,
.temptingto-becomema.subheader-right {
  top: 10px;
  left: 40px;
  height: 8px;
  width: 10px;
}

.temptingto-becomema.header-bottom {
  top: 18px;
  height: 6px;
}

.temptingto-becomema.subheader-left,
.temptingto-becomema.subheader-right {
  top: 24px;
  height: 6px;
}

.temptingto-becomema.header-right,
.temptingto-becomema.subheader-right {
  width: auto;
  left: 300px;
  right: 0;
}

.temptingto-becomema.subheader-right {
  left: 230px;
}

.temptingto-becomema.subheader-bottom {
  top: 30px;
  height: 10px;
}

.temptingto-becomema.content-top,
.temptingto-becomema.content-second-line,
.temptingto-becomema.content-third-line,
.temptingto-becomema.content-second-end,
.temptingto-becomema.content-third-end,
.temptingto-becomema.content-first-end {
  top: 40px;
  left: 0;
  right: 0;
  height: 6px;
}

.temptingto-becomema.content-top {
  height:20px;
}

.temptingto-becomema.content-first-end,
.temptingto-becomema.content-second-end,
.temptingto-becomema.content-third-end{
  width: auto;
  left: 380px;
  right: 0;
  top: 60px;
  height: 8px;
}

.temptingto-becomema.content-second-line {
  top: 68px;
}

.temptingto-becomema.content-second-end {
  left: 420px;
  top: 74px;
}

.temptingto-becomema.content-third-line {
  top: 82px;
}

.temptingto-becomema.content-third-end {
  left: 300px;
  top: 88px;
}

Примечание. В примерах кода я использовал unprefixed CSS, чтобы сохранить его в чистоте. Вы можете использовать наш префикс CSS, чтобы получить кросс версию браузера.

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

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

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

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

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 11 Августа 2018 22:02¹ 0 Хоть страница имеется на Facebook, но реально не когда не замечал, что возможно редко захожу на этот ресурс. Что пришлось зайти и полистать страницы, где реально заметил, что тема точна, что в сети нашел. Осталось немного информаций найти, но и безусловно сам материал, который как можно в описание заметить, где был изменен, но по сути дизайн остался аналогичен, вот только для сайта подойдет или нет, здесь решает веб мастер, хотя можно и под страницу сделать, если такое возможно, т есть под заданную страницу, где только там появлялся загрузчик.