2

Created animation in CSS:

See GIF file

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.

Improve this question
3
  • simply rotate the container Commented Jun 8, 2019 at 11:51
  • Check my second snippet @TemaniAfif Commented Jun 8, 2019 at 11:57
  • in your second snippet you are rotating each bar, try to rotate the whole container Commented Jun 8, 2019 at 11:58

3 Answers 3

Reset to default
1

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>

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

That's great but it doesn't center the bars
@vtcs I didn't focus on centring but on the animation ... centring a div is something very easy to do
@vtcs check the update, you can easily add the centring code
1

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>

Improve this answer

Comments

1

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>

Improve this answer

1 Comment

Your preloader place changed in this code. You need to add also translate for that issue. See in my code.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.