.x-loading {
    display: inline-block;
    vertical-align: middle;
}
.x-loading-spinner{
    font-size: 240%;
    height: 1em;
    width: 1em;
    position: relative;
    -webkit-transform-origin: 0.5em 0.5em
}
.x-loading-spinner > span,
.x-loading-spinner > span:before,
.x-loading-spinner > span:after {
    display: block;
    position: absolute;
    width: 0.1em;
    height: 0.25em;
    top: 0;
    -webkit-transform-origin: 0.05em 0.5em;
    -webkit-border-radius: 0.05em;
    border-radius: 0.05em;
    content: " ";
    background: #fff;
}
.x-loading-spinner > span.x-loading-top{ opacity: 0.8}
.x-loading-spinner > span.x-loading-top::after{opacity: 0.7}
.x-loading-spinner > span.x-loading-left::before{opacity: 1}
.x-loading-spinner > span.x-loading-left{opacity: 0.45}
.x-loading-spinner > span.x-loading-left::after{opacity: 0.6}
.x-loading-spinner > span.x-loading-bottom::before{opacity: 1}
.x-loading-spinner > span.x-loading-bottom{opacity: 0.15}
.x-loading-spinner > span.x-loading-bottom::after{opacity: 0.8}
.x-loading-spinner > span.x-loading-right::before{opacity: 1}
.x-loading-spinner > span.x-loading-right{opacity: 0.15}
.x-loading-spinner > span.x-loading-right::after{opacity: 0.8}
.x-loading-spinner > span.x-loading-top::before{opacity: 0.1}

.x-loading-spinner > span{left:50%;margin-left:-0.05em}
.x-loading-spinner > span.x-loading-top{
-webkit-transform:rotate(0deg);
}
.x-loading-spinner > span.x-loading-right{
-webkit-transform:rotate(90deg);
}
.x-loading-spinner > span.x-loading-bottom{
-webkit-transform:rotate(180deg);
}
.x-loading-spinner > span.x-loading-left{
-webkit-transform:rotate(270deg);
}
.x-loading-spinner > span::before{
-webkit-transform:rotate(30deg);
}
.x-loading-spinner > span::after{
-webkit-transform:rotate(-30deg);
}
.x-loading-spinner{
-webkit-animation-name:x-loading-spinner-rotate;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
}

@-webkit-keyframes x-loading-spinner-rotate{
0%     {-webkit-transform:rotate(0deg);}
8.32%  {-webkit-transform:rotate(0deg);}
8.33%  {-webkit-transform:rotate(30deg);}
16.65% {-webkit-transform:rotate(30deg);}
16.66% {-webkit-transform:rotate(60deg);}
24.99% {-webkit-transform:rotate(60deg);}
25%    {-webkit-transform:rotate(90deg);}
33.32% {-webkit-transform:rotate(90deg);}
33.33% {-webkit-transform:rotate(120deg);}
41.65% {-webkit-transform:rotate(120deg);}
41.66% {-webkit-transform:rotate(150deg);}
49.99% {-webkit-transform:rotate(150deg);}
50%    {-webkit-transform:rotate(180deg);}
58.32% {-webkit-transform:rotate(180deg);}
58.33% {-webkit-transform:rotate(210deg);}
66.65% {-webkit-transform:rotate(210deg);}
66.66% {-webkit-transform:rotate(240deg);}
74.99% {-webkit-transform:rotate(240deg);}
75%    {-webkit-transform:rotate(270deg);}
83.32% {-webkit-transform:rotate(270deg);}
83.33% {-webkit-transform:rotate(300deg);}
91.65% {-webkit-transform:rotate(300deg);}
91.66% {-webkit-transform:rotate(330deg);}
100%   {-webkit-transform:rotate(330deg);}}