.loading-frame {
    display:none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background-color: #fff;
    /*background-color:	#000;
	opacity:			0.6;
    */
    opacity:			0.3;
    cursor:				wait;

    margin: auto;
}

/******* loading-points *******
    Example:
    <div id="loading" class="loading-frame" style="display:none;">
        <ul class="loading-points">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

*/
.loading-points {
    border: 0.01em solid rgba(150, 150, 150, 0.1);
    border-radius: 50%;
    font-size: 100px;
    height: 1em;
    list-style: outside none none;
    margin: 0 auto;
    position: relative;
    top: 35%;
    width: 1em;
    z-index: 2147483647;
}
.loading-points li {
    border-radius: 50%;
    height: 0.2em;
    position: absolute;
    width: 0.2em;
}
.loading-points li:nth-child(1) {
    animation: 1.13s linear 0s normal none infinite running rota, 3.67s ease-in-out 0s alternate none infinite running opa;
    background: #00c176 none repeat scroll 0 0;
    left: 50%;
    margin: 0 0 0 -0.1em;
    top: 0;
    transform-origin: 50% 250% 0;
}
.loading-points li:nth-child(2) {
    animation: 1.86s linear 0s normal none infinite running rota, 4.29s ease-in-out 0s alternate none infinite running opa;
    background: #ff003c none repeat scroll 0 0;
    margin: -0.1em 0 0;
    right: 0;
    top: 50%;
    transform-origin: -150% 50% 0;
}
.loading-points li:nth-child(3) {
    animation: 1.45s linear 0s normal none infinite running rota, 5.12s ease-in-out 0s alternate none infinite running opa;
    background: #fabe28 none repeat scroll 0 0;
    bottom: 0;
    left: 50%;
    margin: 0 0 0 -0.1em;
    transform-origin: 50% -150% 0;
}
.loading-points li:nth-child(4) {
    animation: 1.72s linear 0s normal none infinite running rota, 5.25s ease-in-out 0s alternate none infinite running opa;
    background: #88c100 none repeat scroll 0 0;
    margin: -0.1em 0 0;
    top: 50%;
    transform-origin: -150% 50% 0;
}
@keyframes opa {
    12%   {opacity: 0.8; }
    19.5% {opacity: 0.88;}
    37.2% {opacity: 0.64;}
    40.5% {opacity: 0.52;}
    52.7% {opacity: 0.69;}
    60.2% {opacity: 0.6; }
    66.6% {opacity: 0.52;}
    70%   {opacity: 0.63;}
    79.9% {opacity: 0.6; }
    84.2% {opacity: 0.75;}
    91%   {opacity: 0.87;}
}

@keyframes rota {
    100% {
        transform: rotate(360deg);
    }
}

/****** loading-round ****** 
    Example:
    <div id="loading" class="loading-frame" style="display:none;">    
        <div class="loading-round"></div>
    </div>
*/

.loading-round {
    animation: 1.5s linear 0s normal none infinite running loading-round;
    background: #F9F9F9 none repeat scroll 0 0; /*fed37f*/
    border-radius: 50px;
    height: 50px;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    position: absolute;
    top: 50%;
    width: 50px;
}
.loading-round::after {
    animation: 1.5s linear 0s normal none infinite running loading-round_after;
    border-color: #683894 transparent; /*85d6de*/
    border-radius: 80px;
    border-style: solid;
    border-width: 10px;
    content: "";
    height: 80px;
    left: -15px;
    position: absolute;
    top: -15px;
    width: 80px;
}
@keyframes loading-round {
    0%  { transform: rotate(0deg); }
    50% { background: #683894 none repeat scroll 0 0; transform: rotate(180deg); }
    100%{ transform: rotate(360deg); }
}