Вращение div с помощью CSS

Создал анимацию в CSS:

Посмотреть GIF-файл

body {
  overflow: hidden;
}

#pre_preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #F8F8FF;
  z-index: 99;
}

#pre_status {
  width: 75px;
  height: 100px;
  position: relative;
  left: 50%;
  top: 50%;
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
}

.loader__bar {
  position: absolute;
  bottom: 0;
  width: 15px;
  height: 50%;
  background: #fff;
  transform-origin: center bottom;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
}

.loader__bar:nth-child(1) {
  background: white;
  left: 0px;
  -webkit-animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.loader__bar:nth-child(2) {
  background: black;
  left: 15px;
  -webkit-animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.loader__bar:nth-child(3) {
  background: gray;
  left: 30px;
  -webkit-animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.loader__bar:nth-child(4) {
  background: black;
  left: 45px;
  -webkit-animation: lds-facebook_4 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_4 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

.loader__bar:nth-child(5) {
  background: white;
  left: 60px;
  -webkit-animation: lds-facebook_5 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_5 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  ;
}

@keyframes lds-facebook_1 {
  0% {
    top: 30px;
    height: 140px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_1 {
  0% {
    top: 30px;
    height: 140px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_2 {
  0% {
    top: 36px;
    height: 128px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_2 {
  0% {
    top: 36px;
    height: 128px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_3 {
  0% {
    top: 42px;
    height: 116px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_3 {
  0% {
    top: 42px;
    height: 116px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_4 {
  0% {
    top: 48px;
    height: 104px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_4 {
  0% {
    top: 48px;
    height: 104px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_5 {
  0% {
    top: 54px;
    height: 92px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_5 {
  0% {
    top: 54px;
    height: 92px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}
<div id = "pre_preloader">
  <div id = "pre_status">
    <div class = "loader__bar"></div>
    <div class = "loader__bar"></div>
    <div class = "loader__bar"></div>
    <div class = "loader__bar"></div>
    <div class = "loader__bar"></div>
  </div>
</div>

Но мне нужно, чтобы div повернулся на 90 градусов, как этот файл GIF.

Для этого я пробовал:

body {
  overflow: hidden;
}

#pre_preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #F8F8FF;
  z-index: 99;
}

#pre_status {
  width: 75px;
  height: 100px;
  position: relative;
  left: 50%;
  top: 50%;
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
}

.loader__bar {
  position: absolute;
  bottom: 0;
  width: 15px;
  height: 50%;
  background: #fff;
  transform-origin: center bottom;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
}

.loader__bar:nth-child(1) {
  background: white;
  left: 0px;
  -webkit-animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.loader__bar:nth-child(2) {
  background: black;
  left: 15px;
  -webkit-animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.loader__bar:nth-child(3) {
  background: gray;
  left: 30px;
  -webkit-animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.loader__bar:nth-child(4) {
  background: black;
  left: 45px;
  -webkit-animation: lds-facebook_4 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_4 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

.loader__bar:nth-child(5) {
  background: white;
  left: 60px;
  -webkit-animation: lds-facebook_5 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_5 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  ;
}

@keyframes lds-facebook_1 {
  0% {
    top: 30px;
    height: 140px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_1 {
  0% {
    top: 30px;
    height: 140px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_2 {
  0% {
    top: 36px;
    height: 128px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_2 {
  0% {
    top: 36px;
    height: 128px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_3 {
  0% {
    top: 42px;
    height: 116px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_3 {
  0% {
    top: 42px;
    height: 116px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_4 {
  0% {
    top: 48px;
    height: 104px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_4 {
  0% {
    top: 48px;
    height: 104px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_5 {
  0% {
    top: 54px;
    height: 92px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_5 {
  0% {
    top: 54px;
    height: 92px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}
<div id = "pre_preloader">
  <div id = "pre_status">
    <div class = "loader__bar"></div>
    <div class = "loader__bar"></div>
    <div class = "loader__bar"></div>
    <div class = "loader__bar"></div>
    <div class = "loader__bar"></div>
  </div>
</div>

What changes should I make so that I can get expected result, i.e see GIF file

Я хочу, чтобы моя анимация была похожа на эту GIF-файл.

просто поверните контейнер

— Temani Afif 08.06.2019 13:51

Проверьте мой второй фрагмент @TemaniAfif

— vtcs 08.06.2019 13:57

во втором фрагменте вы вращаете каждую полосу, попробуйте повернуть весь контейнер

— Temani Afif 08.06.2019 13:58
html css css-animations
08.06.2019 13:49
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
3
58
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Просто поверните #pre_status и переведите его, чтобы место вашего контейнера не изменилось. Так:

body {
  overflow: hidden;
}

#pre_preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #F8F8FF;
  z-index: 99;
}

#pre_status {
  width: 75px;
  height: 100px;
  position: relative;
  left: 50%;
  top: 50%;
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  transform: rotate(90deg) translate(49px, -60px);
}

.loader__bar {
  position: absolute;
  bottom: 0;
  width: 15px;
  height: 50%;
  background: #fff;
  transform-origin: center bottom;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
}

.loader__bar:nth-child(1) {
  background: white;
  left: 0px;
  -webkit-animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.loader__bar:nth-child(2) {
  background: black;
  left: 15px;
  -webkit-animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.loader__bar:nth-child(3) {
  background: gray;
  left: 30px;
  -webkit-animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.loader__bar:nth-child(4) {
  background: black;
  left: 45px;
  -webkit-animation: lds-facebook_4 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_4 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

.loader__bar:nth-child(5) {
  background: white;
  left: 60px;
  -webkit-animation: lds-facebook_5 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_5 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  ;
}

@keyframes lds-facebook_1 {
  0% {
    top: 30px;
    height: 140px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_1 {
  0% {
    top: 30px;
    height: 140px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_2 {
  0% {
    top: 36px;
    height: 128px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_2 {
  0% {
    top: 36px;
    height: 128px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_3 {
  0% {
    top: 42px;
    height: 116px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_3 {
  0% {
    top: 42px;
    height: 116px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_4 {
  0% {
    top: 48px;
    height: 104px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_4 {
  0% {
    top: 48px;
    height: 104px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_5 {
  0% {
    top: 54px;
    height: 92px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_5 {
  0% {
    top: 54px;
    height: 92px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}
<div id = "pre_preloader">
  <div id = "pre_status">
    <div class = "loader__bar"></div>
    <div class = "loader__bar"></div>
    <div class = "loader__bar"></div>
    <div class = "loader__bar"></div>
    <div class = "loader__bar"></div>
  </div>
</div>
08.06.2019 14:00

Спасибо Темани Афиф из комментарий

body {
  overflow: hidden;
}

#pre_preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #F8F8FF;
  z-index: 99;
}

#pre_status {
  width: 75px;
  height: 100px;
  position: relative;
  left: 50%;
  top: 50%;
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.loader__bar {
  position: absolute;
  bottom: 0;
  width: 15px;
  height: 50%;
  background: #fff;
  transform-origin: center bottom;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
}

.loader__bar:nth-child(1) {
  background: white;
  left: 0px;
  -webkit-animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.loader__bar:nth-child(2) {
  background: black;
  left: 15px;
  -webkit-animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.loader__bar:nth-child(3) {
  background: gray;
  left: 30px;
  -webkit-animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.loader__bar:nth-child(4) {
  background: black;
  left: 45px;
  -webkit-animation: lds-facebook_4 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_4 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

.loader__bar:nth-child(5) {
  background: white;
  left: 60px;
  -webkit-animation: lds-facebook_5 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  animation: lds-facebook_5 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  ;
}

@keyframes lds-facebook_1 {
  0% {
    top: 30px;
    height: 140px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_1 {
  0% {
    top: 30px;
    height: 140px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_2 {
  0% {
    top: 36px;
    height: 128px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_2 {
  0% {
    top: 36px;
    height: 128px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_3 {
  0% {
    top: 42px;
    height: 116px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_3 {
  0% {
    top: 42px;
    height: 116px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_4 {
  0% {
    top: 48px;
    height: 104px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_4 {
  0% {
    top: 48px;
    height: 104px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@keyframes lds-facebook_5 {
  0% {
    top: 54px;
    height: 92px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}

@-webkit-keyframes lds-facebook_5 {
  0% {
    top: 54px;
    height: 92px;
  }
  50% {
    top: 60px;
    height: 80px;
  }
  100% {
    top: 60px;
    height: 80px;
  }
}
<div id = "pre_preloader">
  <div id = "pre_status">
    <div class = "loader__bar"></div>
    <div class = "loader__bar"></div>
    <div class = "loader__bar"></div>
    <div class = "loader__bar"></div>
    <div class = "loader__bar"></div>
  </div>
</div>

В этом коде изменилось место вашего прелоадера. Вам нужно добавить также перевод для этой проблемы. Смотрите в моем коде.

— Joykal Infotech 08.06.2019 14:06
08.06.2019 14:02
Ответ принят как подходящий

Я бы сделал это по-другому с меньшим количеством кода, и его будет легче настраивать и контролировать:

.box { 
  width:150px;
  height:100px;
  
  background-image:
    linear-gradient(#fff,#fff),
    linear-gradient(#000,#000),
    linear-gradient(grey,grey),
    linear-gradient(#000,#000),
    linear-gradient(#fff,#fff);
  background-size:
    80% 20%;
  background-position:
    50% 0,
    50% 25%,
    50% 50%,
    50% 75%,
    50% 100%;
  background-repeat:no-repeat; 
  filter:drop-shadow(1px 1px 0 rgba(0, 0, 0, .2));
  animation: loading 1s infinite;
  
  /*For centring, not relevant to the animation*/
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
}

/*Each frame we change one 80% to 100% to animate one bar*/
@keyframes loading{
   16.67% { /* 100%/6 */
      background-size:
        100% 20%, /*this*/
        80% 20%,
        80% 20%,
        80% 20%,
        80% 20%;
   }
   33.33% { /* 2*100%/6 */
      background-size:
        80% 20%,
        100% 20%,/*this*/
        80% 20%,
        80% 20%,
        80% 20%;
   }
   50% {  /* 3*100%/6 */
      background-size:
        80% 20%,
        80% 20%,
        100% 20%, /*this*/
        80% 20%,
        80% 20%;
   }
   66.67% { /* 4*100%/6 */
      background-size:
        80% 20%,
        80% 20%,
        80% 20%,
        100% 20%, /*this*/
        80% 20%;
   }
   83.33% { /* 5*100%/6 */
      background-size:
        80% 20%,
        80% 20%,
        80% 20%,
        80% 20%,
        100% 20%; /*this*/
   }
} 


body {
  background:pink;
}
<div class = "box">

</div>

Чтобы иметь вертикальную версию, просто поверните div:

.box { 
  width:150px;
  height:100px;
  
  background-image:
    linear-gradient(#fff,#fff),
    linear-gradient(#000,#000),
    linear-gradient(grey,grey),
    linear-gradient(#000,#000),
    linear-gradient(#fff,#fff);
  background-size:
    80% 20%;
  background-position:
    50% 0,
    50% 25%,
    50% 50%,
    50% 75%,
    50% 100%;
  background-repeat:no-repeat; 
  filter:drop-shadow(1px 1px 0 rgba(0, 0, 0, .2));
  animation: loading 1s infinite;
  
  /*For centring, not relevant to the animation*/
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) rotate(90deg);
}

/*Each frame we change one 80% to 100% to animate one bar*/
@keyframes loading{
   16.67% { /* 100%/6 */
      background-size:
        100% 20%, /*this*/
        80% 20%,
        80% 20%,
        80% 20%,
        80% 20%;
   }
   33.33% { /* 2*100%/6 */
      background-size:
        80% 20%,
        100% 20%,/*this*/
        80% 20%,
        80% 20%,
        80% 20%;
   }
   50% {  /* 3*100%/6 */
      background-size:
        80% 20%,
        80% 20%,
        100% 20%, /*this*/
        80% 20%,
        80% 20%;
   }
   66.67% { /* 4*100%/6 */
      background-size:
        80% 20%,
        80% 20%,
        80% 20%,
        100% 20%, /*this*/
        80% 20%;
   }
   83.33% { /* 5*100%/6 */
      background-size:
        80% 20%,
        80% 20%,
        80% 20%,
        80% 20%,
        100% 20%; /*this*/
   }
} 


body {
  background:pink;
}
<div class = "box">

</div>

Вы можете управлять анимацией, регулируя значение background-size и свойства анимации.

.box { 
  width:150px;
  height:100px;
  
  background-image:
    linear-gradient(#fff,#fff),
    linear-gradient(#000,#000),
    linear-gradient(grey,grey),
    linear-gradient(#000,#000),
    linear-gradient(#fff,#fff);
  background-size:
    80% 20%;
  background-position:
    50% 0,
    50% 25%,
    50% 50%,
    50% 75%,
    50% 100%;
  background-repeat:no-repeat; 
  filter:drop-shadow(1px 1px 0 rgba(0, 0, 0, .2));
  animation: loading 0.8s infinite;
  
  /*For centring, not relevant to the animation*/
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
}

@keyframes loading{
   12.5% {
      background-size:
        90% 20%,
        80% 20%,
        80% 20%,
        80% 20%,
        80% 20%;
   }
   25% {
      background-size:
        95% 20%,
        90% 20%,
        80% 20%,
        80% 20%,
        80% 20%;
   }
   37.5% { 
      background-size:
        100% 20%,
        95% 20%,
        90% 20%,
        80% 20%,
        80% 20%;
   }
   50% {
      background-size:
        95% 20%,
        100% 20%,
        95% 20%,
        90% 20%,
        80% 20%;
   }
   62.5% {
      background-size:
        90% 20%,
        95% 20%,
        100% 20%,
        95% 20%,
        90% 20%;
   }
   75% { 
      background-size:
        80% 20%,
        90% 20%,
        95% 20%,
        100% 20%,
        95% 20%;
   }
   87.5% {
      background-size:
        80% 20%,
        80% 20%,
        90% 20%,
        95% 20%,
        100% 20%;
   }
} 


body {
  background:pink;
}
<div class = "box">

</div>

Это здорово, но это не центрирует полосы

— vtcs 08.06.2019 14:07

@vtcs Я сосредоточился не на центрировании, а на анимации ... центрирование div - это очень просто

— Temani Afif 08.06.2019 14:08

@vtcs проверьте обновление, вы можете легко добавить код центрирования

— Temani Afif 08.06.2019 14:10
08.06.2019 14:02

Другие вопросы по теме

Новая строка строки из javascript
Поиск не может отображать результаты по «имени данных» в Jquery
Измените размер и добавьте белые рамки, чтобы при загрузке изображения в angular всегда был один и тот же размер изображения
Как изменить настройки области просмотра веб-сайта по умолчанию в мобильном браузере на лету?
Невозможно добавить фоновое изображение для определенного DIV в HTML
Html обернуть div на всю ширину
Кликабельное выпадающее меню в joomla
Нарисуйте элемент svg, используя css::after
Событие наведения в css не работает после второго события onclick(), которое выполняется с использованием JavaScript
Bootstrap toast перемещает все элементы

Похожие вопросы

Плагин Leaflet Awesome Marker выбрасывает значок, ошибка не определена
Как получить значение из элемента <p>?
Новая строка строки из javascript
Диспетчер тегов Google создает пустые кнопки внизу моей страницы
Поиск не может отображать результаты по «имени данных» в Jquery
Тег PHP внутри тега PHP, есть ли альтернатива?
Измените размер и добавьте белые рамки, чтобы при загрузке изображения в angular всегда был один и тот же размер изображения
Парсинг данных по тегам и классам
Как изменить настройки области просмотра веб-сайта по умолчанию в мобильном браузере на лету?
Невозможно добавить фоновое изображение для определенного DIV в HTML