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