148 lines
3.9 KiB
SCSS
148 lines
3.9 KiB
SCSS
.wx-coolui-scroller-refresh {
|
|
width : 100%;
|
|
background-size : cover;
|
|
background-position: center bottom;
|
|
background-repeat : no-repeat;
|
|
position : relative;
|
|
overflow : hidden;
|
|
|
|
.refresh-inner {
|
|
position : absolute;
|
|
text-align : center;
|
|
width : 100%;
|
|
font-size : 28rpx;
|
|
display : flex;
|
|
justify-content: center;
|
|
align-items : center;
|
|
|
|
|
|
.down {
|
|
width : 12px;
|
|
height : 12px;
|
|
margin-right : 20rpx;
|
|
// background-color: #000;
|
|
position : relative;
|
|
|
|
.line {
|
|
&:nth-child(1) {
|
|
display : block;
|
|
width : 2px;
|
|
height : 18px;
|
|
background-color: #000;
|
|
position : absolute;
|
|
top : 50%;
|
|
left : 50%;
|
|
transform : translate(-50%, -50%);
|
|
border-radius : 2px;
|
|
opacity : 1;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
width : 8px;
|
|
height : 2px;
|
|
background-color: #000;
|
|
display : block;
|
|
position : absolute;
|
|
bottom : -3px;
|
|
left : 50%;
|
|
transform : rotate(-45deg);
|
|
transform-origin: 0 50%;
|
|
border-radius : 2px;
|
|
opacity : 1;
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
width : 8px;
|
|
height : 2px;
|
|
background-color: #000;
|
|
display : block;
|
|
position : absolute;
|
|
bottom : -3px;
|
|
right : 50%;
|
|
transform : rotate(45deg);
|
|
transform-origin: 100% 50%;
|
|
border-radius : 2px;
|
|
opacity : 1;
|
|
}
|
|
}
|
|
|
|
&.loading {
|
|
display : inline-block;
|
|
position: relative;
|
|
width : 36rpx;
|
|
height : 36rpx;
|
|
|
|
.line {
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing : border-box;
|
|
display : block;
|
|
position : absolute;
|
|
margin : -18rpx 2px 2px -18rpx;
|
|
border-width : 2px;
|
|
border-style : solid;
|
|
border-color : #6190e8 transparent transparent;
|
|
border-radius : 50%;
|
|
-webkit-animation : circle 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
animation : circle 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
width : 36rpx;
|
|
height : 36rpx;
|
|
left : 50%;
|
|
top : 50%;
|
|
transform-origin : 50% 50%;
|
|
background-color : transparent;
|
|
transform : translate(-50%, -50%);
|
|
|
|
&:nth-child(1) {
|
|
-webkit-animation-delay: -.45s;
|
|
animation-delay : -0.45s;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
-webkit-animation-delay: -.3s;
|
|
animation-delay : -0.3s;
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
-webkit-animation-delay: -.15s;
|
|
animation-delay : -0.15s;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.has-bg {
|
|
font-weight : bold;
|
|
background-clip : text;
|
|
-webkit-background-clip : text;
|
|
color : transparent !important;
|
|
background-size : 100% auto;
|
|
// transition : all .4s;
|
|
background-position : -100% -100%;
|
|
background-repeat : no-repeat;
|
|
|
|
&.loading {
|
|
animation: play 0.5s line infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes circle {
|
|
0% {
|
|
transform: rotate(0);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes play {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
|
|
to {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
} |