Rotating div using CSS

Question

Created animation in CSS:

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>

But I need the div to be rotated 90 degrees, like this GIF file.

For this I tried:

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

I want my animation like this GIF File.

in your second snippet you are rotating each bar, try to rotate the whole container — Temani Afif, Jun 08 '19 at 11:58

score 1 · Answer 1 · answered Jun 08 '19 at 12:00

Just rotate #pre_status and translate it so your container place will not change. Like this:

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>

score 1 · Answer 2 · answered Jun 08 '19 at 12:02

Thanks to Temani Afif's comment

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>

Your preloader place changed in this code. You need to add also translate for that issue. See in my code. — Joykal Infotech, Jun 08 '19 at 12:06

Temani Afif · Accepted Answer · 2019-06-08T12:35:45.400

I would do this differently with less of code and it will be easier to adjust and control:

.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>

To have the vertical version simply rotate the 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>

You can control the animation by adjusting the value of background-size and the animation properties.

.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 I didn't focus on centring but on the animation ... centring a div is something very easy to do — Temani Afif, Jun 08 '19 at 12:08
@vtcs check the update, you can easily add the centring code — Temani Afif, Jun 08 '19 at 12:10

Rotating div using CSS

3 Answers3