mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] Loading: add circular type (#618)
This commit is contained in:
neverland
GitHub
parent
6e00edac2d
commit
866aff9c45
@ -14,6 +14,11 @@
|
||||
<van-loading type="spinner" color="black" />
|
||||
<van-loading type="spinner" color="white" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-loading type="circular" color="black" />
|
||||
<van-loading type="circular" color="white" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -23,12 +28,14 @@ export default {
|
||||
'zh-CN': {
|
||||
title1: '单色圆环',
|
||||
title2: '渐变色圆环',
|
||||
title3: 'Spinner'
|
||||
title3: 'Spinner',
|
||||
title4: 'Circular'
|
||||
},
|
||||
'en-US': {
|
||||
title1: 'Solid Circle',
|
||||
title2: 'Gradient Circle',
|
||||
title3: 'Spinner'
|
||||
title3: 'Spinner',
|
||||
title4: 'Circular'
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -38,7 +45,13 @@ export default {
|
||||
.demo-loading {
|
||||
.van-loading {
|
||||
display: inline-block;
|
||||
margin: 10px 0 10px 20px;
|
||||
margin: 5px 0 5px 20px;
|
||||
}
|
||||
|
||||
.van-loading--white {
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -30,6 +30,13 @@ Vue.use(Loading);
|
||||
<van-loading type="spinner" color="white" />
|
||||
```
|
||||
|
||||
#### Circular
|
||||
|
||||
```html
|
||||
<van-loading type="circular" color="black" />
|
||||
<van-loading type="circular" color="white" />
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|
||||
@ -30,6 +30,13 @@ Vue.use(Loading);
|
||||
<van-loading type="spinner" color="white" />
|
||||
```
|
||||
|
||||
#### Circular
|
||||
|
||||
```html
|
||||
<van-loading type="circular" color="black" />
|
||||
<van-loading type="circular" color="white" />
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
<template>
|
||||
<div class="van-loading" :class="['van-loading--' + type, 'van-loading--' + color]">
|
||||
<span class="van-loading__spinner" :class="['van-loading__spinner--' + type, 'van-loading__spinner--' + color]">
|
||||
<i v-if="type === 'spinner'" v-for="item in 12" />
|
||||
<span class="van-loading__spinner" :class="'van-loading__spinner--' + type">
|
||||
<i v-for="item in (type === 'spinner' ? 12 : 0)" />
|
||||
<svg v-if="type === 'circular'" class="van-loading__circular" viewBox="25 25 50 50">
|
||||
<circle cx="50" cy="50" r="20" fill="none"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -28,6 +28,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes van-rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.van-fade {
|
||||
&-enter-active {
|
||||
animation: .3s van-fade-in;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -23,7 +23,6 @@ describe('Loading', () => {
|
||||
const spinner = wrapper.find('.van-loading__spinner')[0];
|
||||
|
||||
expect(spinner.hasClass('van-loading__spinner--gradient-circle')).to.be.true;
|
||||
expect(spinner.hasClass('van-loading__spinner--black')).to.be.true;
|
||||
});
|
||||
|
||||
it('create gradient-circle white', () => {
|
||||
@ -36,7 +35,6 @@ describe('Loading', () => {
|
||||
const spinner = wrapper.find('.van-loading__spinner')[0];
|
||||
|
||||
expect(spinner.hasClass('van-loading__spinner--gradient-circle')).to.be.true;
|
||||
expect(spinner.hasClass('van-loading__spinner--white')).to.be.true;
|
||||
});
|
||||
|
||||
it('create circle black', () => {
|
||||
@ -49,7 +47,6 @@ describe('Loading', () => {
|
||||
const spinner = wrapper.find('.van-loading__spinner')[0];
|
||||
|
||||
expect(spinner.hasClass('van-loading__spinner--circle')).to.be.true;
|
||||
expect(spinner.hasClass('van-loading__spinner--black')).to.be.true;
|
||||
});
|
||||
|
||||
it('create circle white', () => {
|
||||
@ -62,6 +59,5 @@ describe('Loading', () => {
|
||||
const spinner = wrapper.find('.van-loading__spinner')[0];
|
||||
|
||||
expect(spinner.hasClass('van-loading__spinner--circle')).to.be.true;
|
||||
expect(spinner.hasClass('van-loading__spinner--white')).to.be.true;
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user