diff --git a/docs/demos/views/loading.vue b/docs/demos/views/loading.vue index 6b7430075..c4870a2bf 100644 --- a/docs/demos/views/loading.vue +++ b/docs/demos/views/loading.vue @@ -14,6 +14,11 @@ + + + + + @@ -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); } } diff --git a/docs/markdown/en-US/loading.md b/docs/markdown/en-US/loading.md index 5ac34a998..326d138e2 100644 --- a/docs/markdown/en-US/loading.md +++ b/docs/markdown/en-US/loading.md @@ -30,6 +30,13 @@ Vue.use(Loading); ``` +#### Circular + +```html + + +``` + ### API | Attribute | Description | Type | Default | Accepted Values | diff --git a/docs/markdown/zh-CN/loading.md b/docs/markdown/zh-CN/loading.md index 06a3c0667..b2ec4e218 100644 --- a/docs/markdown/zh-CN/loading.md +++ b/docs/markdown/zh-CN/loading.md @@ -30,6 +30,13 @@ Vue.use(Loading); ``` +#### Circular + +```html + + +``` + ### API | 参数 | 说明 | 类型 | 默认值 | 可选值 | diff --git a/packages/loading/index.vue b/packages/loading/index.vue index f12c0c54c..351a02974 100644 --- a/packages/loading/index.vue +++ b/packages/loading/index.vue @@ -1,7 +1,10 @@ diff --git a/packages/vant-css/src/circle.css b/packages/vant-css/src/circle.css index 49eb936db..d4c777616 100644 --- a/packages/vant-css/src/circle.css +++ b/packages/vant-css/src/circle.css @@ -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; } diff --git a/packages/vant-css/src/common/animation.css b/packages/vant-css/src/common/animation.css index f100d1413..1c1330cf6 100644 --- a/packages/vant-css/src/common/animation.css +++ b/packages/vant-css/src/common/animation.css @@ -28,6 +28,15 @@ } } +@keyframes van-rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + .van-fade { &-enter-active { animation: .3s van-fade-in; diff --git a/packages/vant-css/src/loading.css b/packages/vant-css/src/loading.css index 0e8258741..3ad8725e2 100644 --- a/packages/vant-css/src/loading.css +++ b/packages/vant-css/src/loading.css @@ -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; } } diff --git a/test/unit/specs/loading.spec.js b/test/unit/specs/loading.spec.js index 0c496be9d..cac5f4e06 100644 --- a/test/unit/specs/loading.spec.js +++ b/test/unit/specs/loading.spec.js @@ -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; }); });