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

docs/demos/views/loading.vue

@@ -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>

docs/markdown/en-US/loading.md

@@ -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 |

docs/markdown/zh-CN/loading.md

@@ -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
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |

packages/loading/index.vue

@@ -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]">
+    <span class="van-loading__spinner" :class="'van-loading__spinner--' + type">
-      <i v-if="type === 'spinner'" v-for="item in 12" />
+      <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>

packages/vant-css/src/circle.css

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

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;

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;
   }
 }
 

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;
   });
 });