是前文 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);
}}
