loading.scss
@charset "UTF-8";
@import "an.scss";
.loading_box {
height: auto;
.loading {
width: 100px;
height: 100px;
margin: 50px auto;
position: relative;
&:before {
content: "";
position: absolute;
display: block;
border: 5px solid
opacity: 0.9;
width: 50px;
height: 50px;
left: 50%;
top: 50%;
margin: -25px 0 0 -25px;
border-top-color: transparent;
border-bottom-color: transparent;
border-radius: 50%;
-webkit-box-shadow: 0 0 35px
-moz-box-shadow: 0 0 35px
box-shadow: 0 0 35px
@include keyframes(
spin-right,
(
0%: (
transform: rotate(0deg),
-ms-transform: rotate(0deg),
-moz-transform: rotate(0deg),
-webkit-transform: rotate(0deg),
-o-transform: rotate(0deg),
opacity: 0.2,
),
50%: (
transform: rotate(180deg),
-ms-transform: rotate(180deg),
-moz-transform: rotate(180deg),
-webkit-transform: rotate(180deg),
-o-transform: rotate(180deg),
opacity: 1,
),
100%: (
transform: rotate(360deg),
-ms-transform: rotate(360deg),
-moz-transform: rotate(360deg),
-webkit-transform: rotate(360deg),
-o-transform: rotate(360deg),
opacity: 0.2,
),
)
);
@include animation(spin-right 0.5s 0s linear infinite normal);
}
&:after {
content: "";
position: absolute;
display: block;
width: 30px;
height: 30px;
border: 5px solid
opacity: 0.9;
border-radius: 50%;
border-left-color: transparent;
border-bottom-color: transparent;
-webkit-box-shadow: 0 0 35px
-moz-box-shadow: 0 0 35px
box-shadow: 0 0 35px
left: 50%;
top: 50%;
margin: -15px 0 0 -15px;
@include keyframes(
spin-left,
(
0%: (
transform: rotate(0deg),
-ms-transform: rotate(0deg),
-moz-transform: rotate(0deg),
-webkit-transform: rotate(0deg),
-o-transform: rotate(0deg),
opacity: 0.2,
),
50%: (
transform: rotate(-180deg),
-ms-transform: rotate(-180deg),
-moz-transform: rotate(-180deg),
-webkit-transform: rotate(-180deg),
-o-transform: rotate(-180deg),
opacity: 1,
),
100%: (
transform: rotate(-360deg),
-ms-transform: rotate(-360deg),
-moz-transform: rotate(-360deg),
-webkit-transform: rotate(-360deg),
-o-transform: rotate(-360deg),
opacity: 0.2,
),
)
);
@include animation(spin-left 0.5s 0s linear infinite normal);
}
}
}
.no_result {
text-align: center;
padding: 30px 0;
margin: 0 auto;
line-height: 40px;
font-size: 16px;
font-family: "微软雅黑";
}
.loadingBox {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
.loadingbg {
background:
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 5;
}
.loading {
position: absolute;
left: 50%;
top: 40%;
$w: 40px;
$w2: 4px;
z-index: 6;
margin: 0 0 0 -20px;
// border-radius: $w2;
// border:$w2 solid
// width:$w;
// height:$w;
position: relative;
overflow: hidden;
// background: url(../images/dh.png) no-repeat 0 -$w;
// @include keyframes(loading,(
// 0%:(
// background: url(../images/dh.png) no-repeat 0 $w,
// background-size:$w $w
// ),
// 25%:(
// background: url(../images/dh.png) no-repeat 0 0px,
// background-size:$w $w
// ),
// 50%:(
// background: url(../images/dh.png) no-repeat 0 0px,
// background-size:$w $w,
// transform:rotate(0deg),
// -ms-transform:rotate(0deg),
// -moz-transform:rotate(0deg),
// -webkit-transform:rotate(0deg),
// -o-transform:rotate(0deg)
// ),
// 75%:(
// background:
// background-size:$w $w,
// transform:rotate(90deg),
// -ms-transform:rotate(90deg),
// -moz-transform:rotate(90deg),
// -webkit-transform:rotate(90deg),
// -o-transform:rotate(90deg)
// ),
// 100%:(
// background:
// background-size:$w $w,
// transform:rotate(180deg),
// -ms-transform:rotate(180deg),
// -moz-transform:rotate(180deg),
// -webkit-transform:rotate(180deg),
// -o-transform:rotate(180deg)
// )
// ));
// @include animation(loading 1.3s .3s ease-in infinite);
}
}
引入an.scss
@charset "UTF-8";
/**
使用方法
@include keyframes(anMeinv,(
0%:(
background: url(i/meinv.png) no-repeat pxToRem(140) pxToRem(11),
background-size: pxToRem(165) pxToRem(157)
),
50%:(
background: url(i/meinv.png) no-repeat pxToRem(140) pxToRem(11),
background-size: pxToRem(265) pxToRem(257)
),
75%:(
background: url(i/meinv.png) no-repeat pxToRem(140) pxToRem(11),
background-size: pxToRem(565) pxToRem(657)
),
100%:(
background: url(i/meinv.png) no-repeat pxToRem(140) pxToRem(11),
background-size: pxToRem(465) pxToRem(557)
)
));
@include animation(anMeinv 2s ease-out forwards);
*/
$browserPrefix: ("-webkit-", "-moz-", "-ms-", "-o-", "");
@mixin transition($obj) {
@each $i in $browserPrefix {
}
}
@mixin transform($obj) {
@each $i in $browserPrefix {
}
}
@mixin animation($obj) {
@each $i in $browserPrefix {
}
}
@mixin keyframes($name, $obj) {
@-webkit-keyframes
@each $i, $val in $obj {
@each $j, $val2 in $val {
}
}
}
}
@-moz-keyframes
@each $i, $val in $obj {
@each $j, $val2 in $val {
}
}
}
}
@-ms-keyframes
@each $i, $val in $obj {
@each $j, $val2 in $val {
}
}
}
}
@-o-keyframes
@each $i, $val in $obj {
@each $j, $val2 in $val {
}
}
}
}
@keyframes
@each $i, $val in $obj {
@each $j, $v in $val {
}
}
}
}
}