ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-20 10:44:59 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

[new feature] Loading: add circular type (#618)

Browse Source
This commit is contained in:
neverland
2018-02-07 16:35:24 +08:00
committed by GitHub
parent 6e00edac2d
commit 866aff9c45
8 changed files with 121 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/vant-css/src/circle.css
View File

@@ -15,8 +15,8 @@
&__layer {
fill: none;
stroke-dasharray: 3140px;
stroke-dashoffset: 3140px;
stroke-dasharray: 3140;
stroke-dashoffset: 3140;
transform: rotate(90deg);
transform-origin: 530px 530px;
}

9
packages/vant-css/src/common/animation.css
View File

@@ -28,6 +28,15 @@
}
}
@keyframes van-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.van-fade {
&-enter-active {
animation: .3s van-fade-in;

118
packages/vant-css/src/loading.css
View File

@@ -1,70 +1,38 @@
@import './common/var.css';
@keyframes van-loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.van-loading {
width: 30px;
height: 30px;
z-index: 0;
font-size: 0;
line-height: 0;
z-index: 0;
position: relative;
vertical-align: middle;
&--circle {
width: 16px;
height: 16px;
vertical-align: middle;
}
&--gradient-circle,
&--spinner {
width: 30px;
height: 30px;
}
&__spinner {
z-index: -1;
width: 100%;
height: 100%;
position: relative;
z-index: -1;
display: inline-block;
animation: van-loading 0.8s linear infinite;
box-sizing: border-box;
animation: van-rotate 0.8s linear infinite;
&--circle {
border-radius: 100%;
border: 3px solid transparent;
box-sizing: border-box;
&.van-loading__spinner--black {
border-color: $gray;
border-top-color: $gray-darker;
}
&.van-loading__spinner--white {
border-color: rgba(0, 0, 0, .1);
border-top-color: rgba(255, 255, 255, .7);
}
}
&--gradient-circle {
background-size: contain;
&.van-loading__spinner--black {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAzFBMVEUAAAC7u7u7u7u7u7u7u7u7u7u7u7u7u7u6urq7u7u7u7u7u7u7u7u7u7u7u7u7u7u6urq7u7u7u7u7u7u6urq6urq6urq7u7u6urq7u7u3t7e6urq7u7u7u7vBwcG7u7u7u7u6urq7u7u7u7u7u7vBwcG6urq8vLy8vLy6urq8vLy7u7u8vLy7u7u8vLzBwcG8vLy/v7+6urq6urq8vLy9vb27u7u8vLy5ubm0tLS7u7u7u7u6urq5ubm+vr68vLy5ubmzs7O6urq7u7vfbONCAAAAQ3RSTlMAt+HAsdv57bvSnPH1q8/Lxcigo6boberZIBav5JkG1VdGQWA2EYUbwo+AqGc9OSkLMP15dVKWik4lXJJ9ZUpxLi0mvPhQuAAAA2hJREFUSMeN0+t66UAYhuGPpIqmrEabSrRDEEFlY19KpZz/Oa1vNpKxiXj87HX3nZGA64XeaPmsVB8eKn11YHgh3J3TqZXq9QdanvbxkVdH1l20uyg1m03EdYqFfnv7qPnZVC+VKEbJtplFjL2r3k1q9SoljA3zZYGRYo9lN916/UqlconRCvyYt9Psusot5fVmjNnuG1KWcZWSYbVKtYSxc/z09EkurVOucixufbKMIUaK+EmxLnbLLwxznTysM0zTlPPtzQuWaGqTZU5jrJVP7fofw5iM61ewhljbydb/hwlOMfaynPtmGJr+/Kd5cmiWnViryC1ioX+60r2IpyNOdgta4T15W4Z9xNK2Pr54a3P8m9aopdVANKZQ2l7DlUbUsl1eG3g/itLHhC+m/Hra+Xh3UphM+mJYkXHRhJT2H/Eu4okHtJ7C47wLqbU1DrHD4aAC5hRl3IIbGTIu0Ld0XqRa8AXcTJkUEIromzKguChwdBv7BQn3AUiuKELdg4wah6RCCF0Oi2x8nIXbBykbWrlcvK2SLEweJTyFmYSnkFlNwjoMckl2Nu5I+AV0CUfZWL50Hr4k7GbjvYQfQc3lVPywwmwcSrgADTXpbiyCVxWH+Ud1s7F5gsvScnTHspZYDZYxbTTakF1VflRGI2l3x7KR4BHMJVzLxk6oHK1CYEy/7mdRlGWJ5QR9YU0C5FlqljlsWZazq2pa1Qjpg+0d5Re2zxg2Xde1MAej+FdQ1vA2dk2mOSf0JF8MvrJq9s1DB6uViXEPtKmMa1G6DYMYI3eAFsQQ0xduqh1Hf0Gw34t/QIA1TLCu64sg5czd7nj89xcIbAEviClWLn9evbfb9v1uF7dxnfIQRIaMsdnqYtZvtz1fbCNeWcmfyjL9/FwstnuZWv73r21THXMCceMz/DMYDFtj0yHEcfdeqzVnGA/OcBQEIUj96jFldrns9Tab2cwwRtvOutX6Ro0HP25bcNLoNsZppvm2CaeRDafcUjzcTAXuIGYHF9uXzzLcHHcpRnuOvwX2AwIXkQ7H3CKexpidGw/OeMoPz2a7GdiFlKIB7lJ7xDuBhUbsQGrO9hKPBEZtRwRutd+xQ6PdXGDPgaxW2yWziHcMi0v7FtxT6G05nsXY3hO4O7LyvjsjY2ds13MvclPkf8Vf5hfphvSUAAAAAElFTkSuQmCC');
}
&.van-loading__spinner--white {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAtFBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////oK74hAAAAO3RSTlMA4b+398/H3LCf18P7u6Ka69Mv8svvpkCs6G2AqeVeJpaQIFdGsodnOFEYchEEeyo1CHZjHDsVDYtOSk3XTGIAAANESURBVEjHldRtV6pAFIbhLaZHUtHQpIMlL5KgQkgIWP7//3X2DDOxUxDP3bdal8/MtJZQX5L5mxdl/vinNxw4ppHA3YUr7enx8Q+rw3vrDPz8Lnqwe0gxgt/+/n3TgnaqPbE4ZjHKMDZ9z27SfNPr9S4sJvB0Otk122zYw+hyhy5jHa/Jrua9WoyV9hkza2m0nM+lRowJLKzAMzu5tqE6Z5joP/V4puRXu5O+xE8MS00xp5hyub3sYz8cI8vSCvzwMPlt132CuaZ3pofmek9tMBz2eZXun7aBWxRusHUefzCTPK+yebfE8z5arp1DRN4jU6WVerqrLjzEyLaqw0WH7jOGUjTSQKRzWuE11OST3dHDaGRAmaMow2p7HEBtRmcmZ1lDMaxQPHahIeuNWDm9UcqGvAM0ZlT0fD6/AxaOKV7DjUyBzwyPcvzNdoxaZsPNFE5Fe/ZcFOu3cUAxPlnSHYvQbqCll3PVQwIHSRnW27BxJnmw7nZ/tgdRG46eCf6APcGf0JpGsApOt8prxyuC+6ARrLdjeukOvBJ8bMcWwVMYdN/xpyxpxwXBIxi8V/03XhB8bMfuiOLJoEpvx8mswjM4EWy046hP/1UmweYdy2aFfdgK+IJpUSsuCkVaJQIdmew1bj11HsaKsG4EySvB+zYc7vI83M9ns7lZFOxLm7OyhdVy4+Nxh+EHYAx/C4z0dbG8jY+uW/GEPQEyQRcLzbt5aMuyXPTlBwDrU0CWpsXNtohjhsV6CKxYrvLsXeOFdV2XHH0CvKVYRa6qqt2wHR4OqBGXXG7EnPJUbFJ776ORBYzHgicgMoVGyfDk072aDQwjQ62LcRyWhROyi9l2akWE5sHXt+cZRoDbgpM/64KiVZm1ndNyrbthFIU7K1uvtyXOArEdF0D6RlrtOs7ptFkuPz73pumnqxXTDP9s5/CrVOw2YpxmmG9fPkn0wawcdjbMUix1hjqGywrU3PJhgn2C+XYcwVVRyu2E2UssNfLMgto8vnuN5TTfPkJDumOLGzOMluO01F/84CE0VqTMOtxSLG+tJ3Ary8RDCytxKnDGZ2/zdFOLsxzuqch8tL+wZyVwd5GVfa183zTT1dbQjxHU9g9qQcv7AjvQsgAAAABJRU5ErkJggg==');
}
}
&--spinner {
color: $gray;
animation-timing-function: steps(12);
i {
@@ -84,11 +52,75 @@
background-color: currentColor;
}
}
&.van-loading__spinner--white {
color: #fff;
}
}
&--circular {
animation-duration: 2s;
}
}
&__circular {
width: 100%;
height: 100%;
circle {
stroke-width: 3;
stroke-linecap: round;
animation: van-circular 1.5s ease-in-out infinite;
}
}
&--black {
.van-loading__spinner--circle {
border-color: $gray;
border-top-color: $gray-darker;
}
.van-loading__spinner--gradient-circle {
background-image: url('https://b.yzcdn.cn/vant/gradient-circle-black.png');
}
.van-loading__spinner--spinner {
color: $gray;
}
.van-loading__circular circle {
stroke: $gray;
}
}
&--white {
.van-loading__spinner--circle {
border-color: rgba(0, 0, 0, .1);
border-top-color: rgba(255, 255, 255, .7);
}
.van-loading__spinner--gradient-circle {
background-image: url('https://b.yzcdn.cn/vant/gradient-circle-white.png');
}
.van-loading__spinner--spinner {
color: #fff;
}
.van-loading__circular circle {
stroke: $white;
}
}
}
@keyframes van-circular {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120;
}
}