Same HTML decorating the reason for a different result? What happened?
This works alone (condensed):
And it is decorated with:
Can someone explain what just happened?
As far as I know, extra line breaks / spaces should not affect HTML tags.
#drive_main_init_spinner {
height: 50px;
position: relative;
width: 50px
}
.a-Ba {
height: 44px;
overflow: hidden;
position: relative
}
.a-gn-Ba {
height: 28px;
left: 50%;
margin-left: -14px;
position: absolute;
top: 8px;
width: 28px;
-webkit-animation: container-rotate 1.56s linear infinite;
animation: container-rotate 1.56s linear infinite
}
.a-wa-xb {
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
padding-top: 100px
}
.a-wa-xb .f-fd {
display: block;
margin-left: auto;
margin-right: auto;
overflow: hidden
}
.a-Ba-Tl {
height: 44px;
transition: transform .1s cubic-bezier(0.0, 0.0, 0.2, 1);
-webkit-transition: transform .1s cubic-bezier(0.0, 0.0, 0.2, 1)
}
.a-Ba-wc {
transform: scale(0);
-webkit-transform: scale(0)
}
.a-Ba-Gb {
transform: scale(1);
-webkit-transform: scale(1)
}
.a-Nl-ka-Tl {
transition: opacity .4s cubic-bezier(0.0, 0.0, 0.2, 1);
-webkit-transition: opacity .4s cubic-bezier(0.0, 0.0, 0.2, 1)
}
.a-Nl-ka-So {
opacity: .4
}
.a-Ba-hg-J {
height: 0;
position: absolute;
z-index: 1
}
body #init-spinner-container {
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease;
padding-left: 0;
padding-top: 0
}
.ch-Pa-I {
white-space: nowrap
}
@-webkit-keyframes container-rotate {
to {
-webkit-transform: rotate(360deg)
}
}
@keyframes container-rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
.Ba-kj {
position: absolute;
width: 100%;
height: 100%;
opacity: 0
}
.Ba-Sc {
border-color: #4285f4
}
.Ba-hn {
border-color: #db4437
}
.Ba-wn {
border-color: #f4b400
}
.Ba-Em {
border-color: #0f9d58
}
.Ga .Ba-kj.Ba-Sc {
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both
}
.Ga .Ba-kj.Ba-hn {
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both
}
.Ga .Ba-kj.Ba-wn {
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both
}
.Ga .Ba-kj.Ba-Em {
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both
}
@-webkit-keyframes fill-unfill-rotate {
12.5% {
-webkit-transform: rotate(135deg)
}
25% {
-webkit-transform: rotate(270deg)
}
37.5% {
-webkit-transform: rotate(405deg)
}
50% {
-webkit-transform: rotate(540deg)
}
62.5% {
-webkit-transform: rotate(675deg)
}
75% {
-webkit-transform: rotate(810deg)
}
87.5% {
-webkit-transform: rotate(945deg)
}
to {
-webkit-transform: rotate(1080deg)
}
}
@keyframes fill-unfill-rotate {
12.5% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg)
}
25% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg)
}
37.5% {
-webkit-transform: rotate(405deg);
transform: rotate(405deg)
}
50% {
-webkit-transform: rotate(540deg);
transform: rotate(540deg)
}
62.5% {
-webkit-transform: rotate(675deg);
transform: rotate(675deg)
}
75% {
-webkit-transform: rotate(810deg);
transform: rotate(810deg)
}
87.5% {
-webkit-transform: rotate(945deg);
transform: rotate(945deg)
}
to {
-webkit-transform: rotate(1080deg);
transform: rotate(1080deg)
}
}
@-webkit-keyframes blue-fade-in-out {
0% {
opacity: 1
}
25% {
opacity: 1
}
26% {
opacity: 0
}
89% {
opacity: 0
}
90% {
opacity: 1
}
to {
opacity: 1
}
}
@keyframes blue-fade-in-out {
0% {
opacity: 1
}
25% {
opacity: 1
}
26% {
opacity: 0
}
89% {
opacity: 0
}
90% {
opacity: 1
}
to {
opacity: 1
}
}
@-webkit-keyframes red-fade-in-out {
0% {
opacity: 0
}
15% {
opacity: 0
}
25% {
opacity: 1
}
50% {
opacity: 1
}
51% {
opacity: 0
}
}
@keyframes red-fade-in-out {
0% {
opacity: 0
}
15% {
opacity: 0
}
25% {
opacity: 1
}
50% {
opacity: 1
}
51% {
opacity: 0
}
}
@-webkit-keyframes yellow-fade-in-out {
0% {
opacity: 0
}
40% {
opacity: 0
}
50% {
opacity: 1
}
75% {
opacity: 1
}
76% {
opacity: 0
}
}
@keyframes yellow-fade-in-out {
0% {
opacity: 0
}
40% {
opacity: 0
}
50% {
opacity: 1
}
75% {
opacity: 1
}
76% {
opacity: 0
}
}
@-webkit-keyframes green-fade-in-out {
0% {
opacity: 0
}
65% {
opacity: 0
}
75% {
opacity: 1
}
90% {
opacity: 1
}
to {
opacity: 0
}
}
@keyframes green-fade-in-out {
0% {
opacity: 0
}
65% {
opacity: 0
}
75% {
opacity: 1
}
90% {
opacity: 1
}
to {
opacity: 0
}
}
.Ba-Cm-dn {
position: absolute;
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: 0;
left: 45%;
width: 10%;
height: 100%;
overflow: hidden;
border-color: inherit
}
.Ba-Cm-dn .Ba-cb {
width: 1000%;
left: -450%
}
.Ba-cb-Gh {
display: inline-block;
position: relative;
width: 50%;
height: 100%;
overflow: hidden;
border-color: inherit
}
.Ba-cb-Gh .Ba-cb {
width: 200%
}
.Ba-cb {
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
border-width: 3px;
border-style: solid;
border-color: inherit;
border-bottom-color: transparent!important;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-animation: none;
-webkit-animation: none;
animation: none
}
.Ba-cb-Gh.Ba-gc .Ba-cb {
border-right-color: transparent!important;
-webkit-transform: rotate(129deg);
-webkit-transform: rotate(129deg);
transform: rotate(129deg)
}
.Ba-cb-Gh.Ba-Dc .Ba-cb {
left: -100%;
border-left-color: transparent!important;
-webkit-transform: rotate(-129deg);
-webkit-transform: rotate(-129deg);
transform: rotate(-129deg)
}
.Ga .Ba-cb-Gh.Ba-gc .Ba-cb {
-webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both
}
.Ga .Ba-cb-Gh.Ba-Dc .Ba-cb {
-webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both
}
@-webkit-keyframes left-spin {
0% {
-webkit-transform: rotate(130deg)
}
50% {
-webkit-transform: rotate(-5deg)
}
to {
-webkit-transform: rotate(130deg)
}
}
@keyframes left-spin {
0% {
-webkit-transform: rotate(130deg);
transform: rotate(130deg)
}
50% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg)
}
to {
-webkit-transform: rotate(130deg);
transform: rotate(130deg)
}
}
@-webkit-keyframes right-spin {
0% {
-webkit-transform: rotate(-130deg)
}
50% {
-webkit-transform: rotate(5deg)
}
to {
-webkit-transform: rotate(-130deg)
}
}
@keyframes right-spin {
0% {
-webkit-transform: rotate(-130deg);
transform: rotate(-130deg)
}
50% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg)
}
to {
-webkit-transform: rotate(-130deg);
transform: rotate(-130deg)
}
}
.Ba-ti {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0
}
.j-Ta-pb {
position: relative;
display: -moz-inline-box;
display: inline-block
}
<div id="drive_main_init_spinner" class="a-Jf-Ma-m a-Da-wa-xb" tabindex="0">
<div class="a-gn-Ba Ga">
<div class="Ba-kj Ba-Sc">
<div class="Ba-cb-Gh Ba-gc">
<div class="Ba-cb Ba-ti"></div>
</div>
<div class="Ba-Cm-dn">
<div class="Ba-cb Ba-ti"></div>
</div>
<div class="Ba-cb-Gh Ba-Dc">
<div class="Ba-cb Ba-ti"></div>
</div>
</div>
<div class="Ba-kj Ba-hn">
<div class="Ba-cb-Gh Ba-gc">
<div class="Ba-cb Ba-ti"></div>
</div>
<div class="Ba-Cm-dn">
<div class="Ba-cb Ba-ti"></div>
</div>
<div class="Ba-cb-Gh Ba-Dc">
<div class="Ba-cb Ba-ti"></div>
</div>
</div>
<div class="Ba-kj Ba-wn">
<div class="Ba-cb-Gh Ba-gc">
<div class="Ba-cb Ba-ti"></div>
</div>
<div class="Ba-Cm-dn">
<div class="Ba-cb Ba-ti"></div>
</div>
<div class="Ba-cb-Gh Ba-Dc">
<div class="Ba-cb Ba-ti"></div>
</div>
</div>
<div class="Ba-kj Ba-Em">
<div class="Ba-cb-Gh Ba-gc">
<div class="Ba-cb Ba-ti"></div>
</div>
<div class="Ba-Cm-dn">
<div class="Ba-cb Ba-ti"></div>
</div>
<div class="Ba-cb-Gh Ba-Dc">
<div class="Ba-cb Ba-ti"></div>
</div>
</div>
</div>
</div>
+3
source to share
1 answer
This is because there are some of the elements inline-block;
, which means the spaces between them will be met. Adding font-size: 0;
to #drive_main_init_spinner
will stop this from happening even with the space as it decreases in size.
#drive_main_init_spinner {
font-size: 0;
height: 50px;
position: relative;
width: 50px
}
.a-Ba {
height: 44px;
overflow: hidden;
position: relative
}
.a-gn-Ba {
height: 28px;
left: 50%;
margin-left: -14px;
position: absolute;
top: 8px;
width: 28px;
-webkit-animation: container-rotate 1.56s linear infinite;
animation: container-rotate 1.56s linear infinite
}
.a-wa-xb {
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
padding-top: 100px
}
.a-wa-xb .f-fd {
display: block;
margin-left: auto;
margin-right: auto;
overflow: hidden
}
.a-Ba-Tl {
height: 44px;
transition: transform .1s cubic-bezier(0.0, 0.0, 0.2, 1);
-webkit-transition: transform .1s cubic-bezier(0.0, 0.0, 0.2, 1)
}
.a-Ba-wc {
transform: scale(0);
-webkit-transform: scale(0)
}
.a-Ba-Gb {
transform: scale(1);
-webkit-transform: scale(1)
}
.a-Nl-ka-Tl {
transition: opacity .4s cubic-bezier(0.0, 0.0, 0.2, 1);
-webkit-transition: opacity .4s cubic-bezier(0.0, 0.0, 0.2, 1)
}
.a-Nl-ka-So {
opacity: .4
}
.a-Ba-hg-J {
height: 0;
position: absolute;
z-index: 1
}
body #init-spinner-container {
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease;
padding-left: 0;
padding-top: 0
}
.ch-Pa-I {
white-space: nowrap
}
@-webkit-keyframes container-rotate {
to {
-webkit-transform: rotate(360deg)
}
}
@keyframes container-rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
.Ba-kj {
position: absolute;
width: 100%;
height: 100%;
opacity: 0
}
.Ba-Sc {
border-color: #4285f4
}
.Ba-hn {
border-color: #db4437
}
.Ba-wn {
border-color: #f4b400
}
.Ba-Em {
border-color: #0f9d58
}
.Ga .Ba-kj.Ba-Sc {
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both
}
.Ga .Ba-kj.Ba-hn {
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both
}
.Ga .Ba-kj.Ba-wn {
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both
}
.Ga .Ba-kj.Ba-Em {
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both
}
@-webkit-keyframes fill-unfill-rotate {
12.5% {
-webkit-transform: rotate(135deg)
}
25% {
-webkit-transform: rotate(270deg)
}
37.5% {
-webkit-transform: rotate(405deg)
}
50% {
-webkit-transform: rotate(540deg)
}
62.5% {
-webkit-transform: rotate(675deg)
}
75% {
-webkit-transform: rotate(810deg)
}
87.5% {
-webkit-transform: rotate(945deg)
}
to {
-webkit-transform: rotate(1080deg)
}
}
@keyframes fill-unfill-rotate {
12.5% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg)
}
25% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg)
}
37.5% {
-webkit-transform: rotate(405deg);
transform: rotate(405deg)
}
50% {
-webkit-transform: rotate(540deg);
transform: rotate(540deg)
}
62.5% {
-webkit-transform: rotate(675deg);
transform: rotate(675deg)
}
75% {
-webkit-transform: rotate(810deg);
transform: rotate(810deg)
}
87.5% {
-webkit-transform: rotate(945deg);
transform: rotate(945deg)
}
to {
-webkit-transform: rotate(1080deg);
transform: rotate(1080deg)
}
}
@-webkit-keyframes blue-fade-in-out {
0% {
opacity: 1
}
25% {
opacity: 1
}
26% {
opacity: 0
}
89% {
opacity: 0
}
90% {
opacity: 1
}
to {
opacity: 1
}
}
@keyframes blue-fade-in-out {
0% {
opacity: 1
}
25% {
opacity: 1
}
26% {
opacity: 0
}
89% {
opacity: 0
}
90% {
opacity: 1
}
to {
opacity: 1
}
}
@-webkit-keyframes red-fade-in-out {
0% {
opacity: 0
}
15% {
opacity: 0
}
25% {
opacity: 1
}
50% {
opacity: 1
}
51% {
opacity: 0
}
}
@keyframes red-fade-in-out {
0% {
opacity: 0
}
15% {
opacity: 0
}
25% {
opacity: 1
}
50% {
opacity: 1
}
51% {
opacity: 0
}
}
@-webkit-keyframes yellow-fade-in-out {
0% {
opacity: 0
}
40% {
opacity: 0
}
50% {
opacity: 1
}
75% {
opacity: 1
}
76% {
opacity: 0
}
}
@keyframes yellow-fade-in-out {
0% {
opacity: 0
}
40% {
opacity: 0
}
50% {
opacity: 1
}
75% {
opacity: 1
}
76% {
opacity: 0
}
}
@-webkit-keyframes green-fade-in-out {
0% {
opacity: 0
}
65% {
opacity: 0
}
75% {
opacity: 1
}
90% {
opacity: 1
}
to {
opacity: 0
}
}
@keyframes green-fade-in-out {
0% {
opacity: 0
}
65% {
opacity: 0
}
75% {
opacity: 1
}
90% {
opacity: 1
}
to {
opacity: 0
}
}
.Ba-Cm-dn {
position: absolute;
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: 0;
left: 45%;
width: 10%;
height: 100%;
overflow: hidden;
border-color: inherit
}
.Ba-Cm-dn .Ba-cb {
width: 1000%;
left: -450%
}
.Ba-cb-Gh {
display: inline-block;
position: relative;
width: 50%;
height: 100%;
overflow: hidden;
border-color: inherit
}
.Ba-cb-Gh .Ba-cb {
width: 200%
}
.Ba-cb {
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
border-width: 3px;
border-style: solid;
border-color: inherit;
border-bottom-color: transparent!important;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-animation: none;
-webkit-animation: none;
animation: none
}
.Ba-cb-Gh.Ba-gc .Ba-cb {
border-right-color: transparent!important;
-webkit-transform: rotate(129deg);
-webkit-transform: rotate(129deg);
transform: rotate(129deg)
}
.Ba-cb-Gh.Ba-Dc .Ba-cb {
left: -100%;
border-left-color: transparent!important;
-webkit-transform: rotate(-129deg);
-webkit-transform: rotate(-129deg);
transform: rotate(-129deg)
}
.Ga .Ba-cb-Gh.Ba-gc .Ba-cb {
-webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both
}
.Ga .Ba-cb-Gh.Ba-Dc .Ba-cb {
-webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
-webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both
}
@-webkit-keyframes left-spin {
0% {
-webkit-transform: rotate(130deg)
}
50% {
-webkit-transform: rotate(-5deg)
}
to {
-webkit-transform: rotate(130deg)
}
}
@keyframes left-spin {
0% {
-webkit-transform: rotate(130deg);
transform: rotate(130deg)
}
50% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg)
}
to {
-webkit-transform: rotate(130deg);
transform: rotate(130deg)
}
}
@-webkit-keyframes right-spin {
0% {
-webkit-transform: rotate(-130deg)
}
50% {
-webkit-transform: rotate(5deg)
}
to {
-webkit-transform: rotate(-130deg)
}
}
@keyframes right-spin {
0% {
-webkit-transform: rotate(-130deg);
transform: rotate(-130deg)
}
50% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg)
}
to {
-webkit-transform: rotate(-130deg);
transform: rotate(-130deg)
}
}
.Ba-ti {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0
}
.j-Ta-pb {
position: relative;
display: -moz-inline-box;
display: inline-block
}
<div id="drive_main_init_spinner" class="a-Jf-Ma-m a-Da-wa-xb" tabindex="0">
<div class="a-gn-Ba Ga">
<div class="Ba-kj Ba-Sc">
<div class="Ba-cb-Gh Ba-gc">
<div class="Ba-cb Ba-ti"></div>
</div>
<div class="Ba-Cm-dn">
<div class="Ba-cb Ba-ti"></div>
</div>
<div class="Ba-cb-Gh Ba-Dc">
<div class="Ba-cb Ba-ti"></div>
</div>
</div>
<div class="Ba-kj Ba-hn">
<div class="Ba-cb-Gh Ba-gc">
<div class="Ba-cb Ba-ti"></div>
</div>
<div class="Ba-Cm-dn">
<div class="Ba-cb Ba-ti"></div>
</div>
<div class="Ba-cb-Gh Ba-Dc">
<div class="Ba-cb Ba-ti"></div>
</div>
</div>
<div class="Ba-kj Ba-wn">
<div class="Ba-cb-Gh Ba-gc">
<div class="Ba-cb Ba-ti"></div>
</div>
<div class="Ba-Cm-dn">
<div class="Ba-cb Ba-ti"></div>
</div>
<div class="Ba-cb-Gh Ba-Dc">
<div class="Ba-cb Ba-ti"></div>
</div>
</div>
<div class="Ba-kj Ba-Em">
<div class="Ba-cb-Gh Ba-gc">
<div class="Ba-cb Ba-ti"></div>
</div>
<div class="Ba-Cm-dn">
<div class="Ba-cb Ba-ti"></div>
</div>
<div class="Ba-cb-Gh Ba-Dc">
<div class="Ba-cb Ba-ti"></div>
</div>
</div>
</div>
</div>
JS script: http://jsfiddle.net/4ouLhbga/
+4
source to share