﻿.init-loading{ transition:all .5s ease;opacity:0; position: relative;z-index:20200101; }
.init-loading-active{ opacity:1; }
.init-loading-shade{ background-color:rgba(0,0,0,.75); pointer-events:auto; position: fixed; left: 0; top: 0; width: 100%; height: 100%; }

/* 主区域(图标+文字) */
.init-loading-center{position: fixed;top:50%;left:50%;width: 200px;height: 100px;margin: -50px 0 0 -100px;transition: all 1s ease;opacity:1}
.init-loading-center span{clear:both;text-align: center;display: block;color:#fff;margin: 10px 0 0 0;}

/* 主区域切换效果相关类 */
.init-loading-center-prepare{opacity:0;top:60%;}
.init-loading-center-fadeout{opacity:0;top:40%;}

/* 具体图标 */
.init-loading-anim-jump{width: 75px;margin: auto;height: 35px;overflow: hidden;}
.init-loading-anim-jump i{width:15px;height:15px;margin: 0 5px;position: relative;display:block;float: left;border-radius:100%;background: #fff;animation: init_loading_jump 1s ease infinite;}
.init-loading-anim-jump i:nth-child(2){animation-delay: .25s;}
.init-loading-anim-jump i:nth-child(3){animation-delay: .5s;}

.init-loading-icon-ok{  width:40px;height:40px;margin:auto;position: relative; background: url('../images/2f1b6cb9307f44aab866f8e86ac69641.gif') center center / 38px 38px no-repeat; }
.init-loading-icon-warning{  width:40px;height:40px;margin:auto;position: relative; background: url('../images/beb4fe15523a43bc9cf45d970cd4502b.gif') center center / 38px 38px no-repeat; }
.init-loading-anim-windmill{width:40px;height:40px;margin:auto;position: relative; background: url('../images/68136e10d53d499494248d8c4006e32e.gif') center center /38px 38px no-repeat ;animation: init_loading_rotate 1s linear infinite;
}
.init-loading-anim-dots{width:40px;height:40px;margin:auto;position: relative; background: url('../images/92ec009058184fe6874a9d359a157fe4.gif') center center / 38px 38px no-repeat ;animation: init_loading_rotate 1.5s linear infinite; }

/* 各图标的动画 */
@keyframes init_loading_jump{ 0%{top:20px;} 50%{top:0px;} 100%{top:20px;} }
@keyframes init_loading_rotate{ 0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);} }