Создана анимация в 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>
Какие изменения необходимо внести, чтобы получить ожидаемый результат, например см. Файл GIF
Я хочу, чтобы моя анимация была такой GIF-файл .