[breaking change] Loading: remove circle、gradient-circle type

docs/markdown/v2-progress-tracking.md

@@ -45,8 +45,10 @@
 
 ### Loading
 
-- [ ] 移除 circle 类型
+- [x] 移除 circle 类型
-- [ ] 移除 gradient-circle 类型
+- [x] 移除 gradient-circle 类型
+
+改动原因：视觉规范变更
 
 ### Area
 

packages/address-edit/test/__snapshots__/index.spec.js.snap

@@ -38,7 +38,7 @@ exports[`create a AddressEdit 1`] = `
         <div class="van-picker__confirm">确认</div>
       </div>
       <div class="van-picker__loading">
-        <div class="van-loading van-loading--circular van-loading" style="color:#c9c9c9;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+        <div class="van-loading van-loading--circular" style="color:#c9c9c9;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
       </div>
       <div class="van-picker__columns" style="height:220px;">
         <div class="van-picker-column" style="height:220px;">

packages/button/test/__snapshots__/index.spec.js.snap

@@ -2,6 +2,6 @@
 
 exports[`loading size 1`] = `
 <button class="van-button van-button--default van-button--normal van-button--loading">
-  <div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201); width: 10px; height: 10px;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+  <div class="van-loading van-loading--circular" style="color: rgb(201, 201, 201); width: 10px; height: 10px;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
 </button>
 `;

packages/loading/index.less

@@ -9,11 +9,6 @@
   position: relative;
   vertical-align: middle;
 
-  &--circle {
-    width: 16px;
-    height: 16px;
-  }
-
   &__spinner {
     z-index: -1;
     width: 100%;
@@ -23,18 +18,6 @@
     box-sizing: border-box;
     animation: van-rotate 0.8s linear infinite;
 
-    &--circle {
-      border-radius: 100%;
-      border: 3px solid transparent;
-      border-color: @gray;
-      border-top-color: @gray-darker;
-    }
-
-    &--gradient-circle {
-      background-size: contain;
-      background-image: url('https://img.yzcdn.cn/vant/gradient-circle-black.png');
-    }
-
     &--spinner {
       animation-timing-function: steps(12);
 
@@ -73,17 +56,6 @@
       animation: van-circular 1.5s ease-in-out infinite;
     }
   }
-
-  &--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://img.yzcdn.cn/vant/gradient-circle-white.png');
-    }
-  }
 }
 
 @keyframes van-circular {

packages/loading/index.tsx

@@ -22,10 +22,8 @@ function Loading(
 ) {
   const { color, size, type } = props;
 
-  const colorType = color === 'white' || color === 'black' ? color : '';
-
   const style = {
-    color: color === 'black' ? DEFAULT_COLOR : color,
+    color,
     width: size,
     height: size
   };
@@ -44,7 +42,7 @@ function Loading(
   );
 
   return (
-    <div class={bem([type, colorType])} style={style} {...inherit(ctx, true)}>
+    <div class={bem([type])} style={style} {...inherit(ctx, true)}>
       <span class={bem('spinner', type)}>
         {Spin}
         {Circular}

packages/pull-refresh/test/__snapshots__/index.spec.js.snap

@@ -25,7 +25,7 @@ exports[`change head content when pulling down 3`] = `
   <div class="van-pull-refresh__track" style="transition: 300ms; transform: translate3d(0,50px, 0);">
     <div class="van-pull-refresh__head">
       <div class="van-pull-refresh__loading">
-        <div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span>加载中...</span>
+        <div class="van-loading van-loading--circular" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span>加载中...</span>
       </div>
     </div>
   </div>
@@ -37,7 +37,7 @@ exports[`change head content when pulling down 4`] = `
   <div class="van-pull-refresh__track" style="transition: 300ms; transform: translate3d(0,50px, 0);">
     <div class="van-pull-refresh__head">
       <div class="van-pull-refresh__loading">
-        <div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span>加载中...</span>
+        <div class="van-loading van-loading--circular" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span>加载中...</span>
       </div>
     </div>
   </div>