.loading-container {
height: 300px;
padding: 12px;
}
.loading {
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: wave;
-webkit-animation-timing-function: linear;
background: #f6f7f8;
background-image: -webkit-gradient(linear, left center, right center, from(#f6f7f8), color-stop(.2, #edeef1), color-stop(.4, #f6f7f8), to(#f6f7f8));
background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
background-repeat: no-repeat;
background-size: 800px 104px;
height: 104px;
position: relative;
}
.reverse-direction .loading {
-webkit-animation-direction: reverse;
}
.loading div {
background: #fff;
height: 6px;
left: 0;
position: absolute;
right: 0;
}
div.shape1 {
height: 40px;
left: 40px;
right: auto;
top: 0;
width: 8px;
}
div.shape2 {
height: 8px;
left: 48px;
top: 0;
}
div.shape3 {
left: 136px;
top: 8px;
}
div.shape4 {
height: 12px;
left: 48px;
top: 14px;
}
div.shape5 {
left: 100px;
top: 26px;
}
div.shape6 {
height: 10px;
left: 48px;
top: 32px;
}
div.shape7 {
height: 20px;
top: 40px;
}
div.shape8 {
left: 410px;
top: 60px;
}
div.shape9 {
height: 13px;
top: 66px;
}
div.shape10 {
left: 440px;
top: 79px;
}
div.shape11 {
height: 13px;
top: 85px;
}
div.shape12 {
left: 178px;
top: 98px;
}
@-webkit-keyframes wave {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
