页面加载过渡页 loading plugin css

是前文 plugin 示例 loading 中需要用到的样式。现在样式扩充为 5类。loadtwo 使用到了bgimg

/*loading animation loading one*/

/* loading 直接追到到 body 最后 *//*loading-cover 全局遮盖层

*/.loadcover {    position: fixed;    left: 0;    right: 0;    top: 0;    bottom: 0;    background: rgba(0,0,0,.3);    z-index: 9999;}.loadone {    position: fixed;    top: 50%;    margin-top: -125px;    z-index: 100;    left: 50%;    width: 300px;    height: 250px;    line-height: 140px;    margin-left: -150px;    border-top: 1px solid #f1f1f1;    border-radius: 10px;    text-align: center;    color: #797979;    background: #fff;    font-size: 15px!important;    -webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.1);    -moz-box-shadow:0 10px 30px rgba(0,0,0,0.1);    -ms-box-shadow:0 10px 30px rgba(0,0,0,0.1);    box-shadow: 0 10px 30px rgba(0,0,0,0.1);}.loadone:before,.loadone:after {    content: "";    position: absolute;    top: 60%;    left: 50%;    display: block;    width: 0.5em;    height: 0.5em;    border-radius: 0.25em;    transform: translate(-50%,-50%);}.loadone:before {    animation: before 2s infinite;}.loadone:after {    animation: after 2s infinite;}@keyframes before {    0% {        width: 0.5em;        box-shadow: 1em -0.5em #f884a8, -1em 0.5em #b9c7ff;    }    35%{        width: 2.5em;        box-shadow: 0 -0.5em  #f10851, 0 0.5em #728ffe;    }    70% {        width: 0.5em;        box-shadow: -1em -0.5em  #f884a8, 1em 0.5em #b9c7ff;    }    100%{        box-shadow: 1em -0.5em  #f884a8, -1em 0.5em #b9c7ff;    }}

@keyframes after {    0% {        height: 0.5em;        box-shadow: 0.5em 1em  #ffd380, -0.5em -1em #97d890;    }    35%{        height: 2.5em;        box-shadow: 0.5em 0  #ffa600, -0.5em 0 #2fb020;    }    70% {        height: 0.5em;        box-shadow: 0.5em -1em #ffd380, -0.5em 1em #97d890;    }    100%{        box-shadow: 0.5em 1em #ffd380,  -0.5em -1em #97d890;    }}

/*洗衣机*//*/洗衣机*/.loadtwo {    width: 300px;    height: 180px;    position: fixed;    left: 50%;    top: 50%;    margin-left: -150px;    margin-top: -50px;    background: url("washer.png") no-repeat center center #fff;    line-height: 300px;    text-align: center;    color: #333;    border-radius: 10px;}.loadtwo:before {    content: "";    display: block;    width: 30px;    height: 30px;    position: absolute;    left: 50%;    top: 50%;    margin-top: -11px;    margin-left: -15px;    border-radius: 100%;    border: 1px solid #999;    background: linear-gradient(90deg, transparent 0%, transparent 70%, lightskyblue 30%, skyblue 100%);    animation: washer 0.8s 0s infinite linear;}

@keyframes washer {    0% {        transform: rotate(0deg);    }    25% {        transform: rotate(90deg);    }    50% {        transform: rotate(180deg);    }    75% {        transform: rotate(270deg);    }    100% {        transform: rotate(360deg);    }}

/* 最常见的空心圆旋转 */.loadthree {    width: 300px;    height: 150px;    position: fixed;    left: 50%;    top: 50%;    margin-left: -150px;    margin-top: -50px;    line-height: 200px;    text-align: center;    color: #333;    background: #fff;    border-radius: 10px;}.loadthree:before {    content: '';    display: block;    width: 40px;    height: 40px;    position: fixed;    border-radius: 100%;    left: 50%;    top: 50%;    margin-left: -20px;    margin-top: -10px;    border: 2px solid #ffa600;    border-bottom-color: transparent;    animation: scalecircle 0.8s 0s infinite linear;}@keyframes scalecircle {    0% {        transform: rotate(0deg);

    }    50% {        transform: rotate(180deg);

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

    }}

/* before after 创建两个圆，中心圆实心缩放，外圆空心旋转缩放 */.loadfour {    width: 300px;    height: 150px;    position: fixed;    left: 50%;    top: 50%;    margin-left: -150px;    margin-top: -50px;    line-height: 200px;    text-align: center;    color: #333;    background: #fff;    border-radius: 10px;}.loadfour:before,.loadfour:after {     content: '';     display: block;     position: fixed;     border-radius: 100%;     left: 50%;     top: 50%;    border: 2px solid #ffa600; }.loadfour:before {    width: 20px;    height: 20px;    margin-left: -10px;    margin-top: -10px;    border-left-color: transparent;    border-right-color: transparent;    animation: innercircle 0.8s 0s infinite linear;}.loadfour:after {    width: 30px;    height: 30px;    margin-left: -15px;    margin-top: -15px;    border-bottom-color: transparent;    border-top-color: transparent;    animation: outercircle 0.8s 0s infinite linear;}@keyframes innercircle {    0% {        transform: rotate(360deg);

    }    50% {        transform: rotate(180deg);

    }    100% {        transform: rotate(0deg);

    }  }@keyframes outercircle {    0% {        transform: scale(1.2) rotate(0deg);

    }    100% {        transform: scale(1.2) rotate(360deg);

    }}

/* before after 创建两个圆，圆空心旋转缩放 */.loadfive {    width: 300px;    height: 150px;    position: fixed;    left: 50%;    top: 50%;    margin-left: -150px;    margin-top: -50px;    line-height: 200px;    text-align: center;    color: #333;    background: #fff;    border-radius: 10px;}.loadfive:before,.loadfive:after {    content: '';    display: block;    position: fixed;    border-radius: 100%;    left: 50%;    top: 50%;    border: 2px solid #ffa600;    animation: bordercircle 1s 0s infinite linear;}.loadfive:before {    width: 20px;    height: 20px;    margin-left: -10px;    margin-top: -10px;    background: #ffa600;}.loadfive:after {    width: 34px;    height: 34px;    margin-left: -17px;    margin-top: -17px;    border-bottom-color: transparent;    border-top-color: transparent;}@keyframes bordercircle {    0% {        transform: scale(1) rotate(-90deg);

    }    50% {        transform: scale(0.8) rotate(270deg);

    }    100% {        transform: scale(1) rotate(90deg);

    }}