From 56cc2ce8375f62b134c97c412bbb97be6cf9c97b Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Thu, 30 Aug 2018 15:24:59 +0800
Subject: [PATCH] [improvement] Loading: support any color (#1717)

---
 .../test/__snapshots__/index.spec.js.snap     |  2 +-
 .../test/__snapshots__/demo.spec.js.snap      |  4 +--
 .../list/test/__snapshots__/demo.spec.js.snap |  2 +-
 packages/loading/demo/index.vue               |  4 +--
 packages/loading/en-US.md                     |  6 ++--
 packages/loading/index.vue                    | 16 +++++++---
 .../test/__snapshots__/demo.spec.js.snap      |  9 +++---
 packages/loading/zh-CN.md                     |  6 ++--
 .../test/__snapshots__/demo.spec.js.snap      |  2 +-
 .../test/__snapshots__/index.spec.js.snap     |  4 +--
 packages/sku/components/SkuImgUploader.vue    |  2 +-
 .../test/__snapshots__/demo.spec.js.snap      |  2 +-
 .../test/__snapshots__/demo.spec.js.snap      |  2 +-
 .../test/__snapshots__/demo.spec.js.snap      |  2 +-
 packages/vant-css/src/loading.css             | 31 +++----------------
 15 files changed, 40 insertions(+), 54 deletions(-)

diff --git a/packages/address-edit/test/__snapshots__/index.spec.js.snap b/packages/address-edit/test/__snapshots__/index.spec.js.snap
index 8a49281aa..67febb89d 100644
--- a/packages/address-edit/test/__snapshots__/index.spec.js.snap
+++ b/packages/address-edit/test/__snapshots__/index.spec.js.snap
@@ -87,7 +87,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--black"><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 van-loading" style="color:#c9c9c9;width:undefined;height:undefined;"><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;">
diff --git a/packages/button/test/__snapshots__/demo.spec.js.snap b/packages/button/test/__snapshots__/demo.spec.js.snap
index f990f192a..8b2fcc606 100644
--- a/packages/button/test/__snapshots__/demo.spec.js.snap
+++ b/packages/button/test/__snapshots__/demo.spec.js.snap
@@ -42,10 +42,10 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <button class="van-button van-button--default van-button--normal van-button--loading van-button--unclickable">
-      <div class="van-loading van-loading--circular van-loading--black" style="width:20px;height:20px;"><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 class="van-button__text"></span></button>
+      <div class="van-loading van-loading--circular van-loading--black" style="color:#c9c9c9;width:20px;height:20px;"><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 class="van-button__text"></span></button>
     <button
       class="van-button van-button--primary van-button--normal van-button--loading van-button--unclickable">
-      <div class="van-loading van-loading--circular van-loading--white" style="width:20px;height:20px;"><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 class="van-button__text"></span></button>
+      <div class="van-loading van-loading--circular van-loading--white" style="color:white;width:20px;height:20px;"><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 class="van-button__text"></span></button>
   </div>
   <div>
     <a href="https://www.youzan.com" target="_blank" class="van-button van-button--default van-button--normal">
diff --git a/packages/list/test/__snapshots__/demo.spec.js.snap b/packages/list/test/__snapshots__/demo.spec.js.snap
index 36f8e69d5..1239f6139 100644
--- a/packages/list/test/__snapshots__/demo.spec.js.snap
+++ b/packages/list/test/__snapshots__/demo.spec.js.snap
@@ -13,7 +13,7 @@ exports[`renders demo correctly 1`] = `
         </div>
         <div class="van-list">
           <div class="van-list__loading" style="display:none;">
-            <div class="van-loading van-loading--circular van-loading--black"><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 class="van-list__loading-text">加载中...</span></div>
+            <div class="van-loading van-loading--circular van-loading" style="color:#c9c9c9;width:undefined;height:undefined;"><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 class="van-list__loading-text">加载中...</span></div>
         </div>
       </div>
     </div>
diff --git a/packages/loading/demo/index.vue b/packages/loading/demo/index.vue
index 348845ead..e7cb36486 100644
--- a/packages/loading/demo/index.vue
+++ b/packages/loading/demo/index.vue
@@ -1,12 +1,12 @@
 <template>
   <demo-section>
     <demo-block :title="$t('title1')">
-      <van-loading color="black" />
+      <van-loading />
       <van-loading color="white" />
     </demo-block>
 
     <demo-block :title="$t('title2')">
-      <van-loading type="spinner" color="black" />
+      <van-loading type="spinner" />
       <van-loading type="spinner" color="white" />
     </demo-block>
   </demo-section>
diff --git a/packages/loading/en-US.md b/packages/loading/en-US.md
index 30bac60e3..15ad4bdb8 100644
--- a/packages/loading/en-US.md
+++ b/packages/loading/en-US.md
@@ -12,14 +12,14 @@ Vue.use(Loading);
 #### Circular
 
 ```html
-<van-loading color="black" />
+<van-loading />
 <van-loading color="white" />
 ```
 
 #### Spinner
 
 ```html
-<van-loading type="spinner" color="black" />
+<van-loading type="spinner" />
 <van-loading type="spinner" color="white" />
 ```
 
@@ -27,6 +27,6 @@ Vue.use(Loading);
 
 | Attribute | Description | Type | Default |
 |-----------|-----------|-----------|-------------|
-| color | Can be set to `white` | `String` | `black` |  |
+| color | Loading color | `String` | `#c9c9c9` |  |
 | type | Can be set to `spinner` | `String` | `circular` |
 | size | Size | `String` | `30px` |
diff --git a/packages/loading/index.vue b/packages/loading/index.vue
index bd5f7ec16..35958687c 100644
--- a/packages/loading/index.vue
+++ b/packages/loading/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="b([type, color])" :style="style">
+  <div :class="b([type, colorType])" :style="style">
     <span :class="b('spinner', type)">
       <i v-for="(item, index) in (type === 'spinner' ? 12 : 0)" :key="index" />
       <svg v-if="type === 'circular'" :class="b('circular')" viewBox="25 25 50 50">
@@ -12,6 +12,8 @@
 <script>
 import create from '../utils/create-basic';
 
+const DEFAULT_COLOR = '#c9c9c9';
+
 export default create({
   name: 'loading',
 
@@ -23,16 +25,22 @@ export default create({
     },
     color: {
       type: String,
-      default: 'black'
+      default: DEFAULT_COLOR
     }
   },
 
   computed: {
+    colorType() {
+      const { color } = this;
+      return color === 'white' || color === 'black' ? color : '';
+    },
+
     style() {
-      return this.size ? {
+      return {
+        color: this.color === 'black' ? DEFAULT_COLOR : this.color,
         width: this.size,
         height: this.size
-      } : {};
+      };
     }
   }
 });
diff --git a/packages/loading/test/__snapshots__/demo.spec.js.snap b/packages/loading/test/__snapshots__/demo.spec.js.snap
index abeb7fc1c..5e4074a88 100644
--- a/packages/loading/test/__snapshots__/demo.spec.js.snap
+++ b/packages/loading/test/__snapshots__/demo.spec.js.snap
@@ -3,12 +3,13 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-loading van-loading--circular van-loading--black"><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 van-loading--white"><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 van-loading" style="color:#c9c9c9;width:undefined;height:undefined;"><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 van-loading--white"
+      style="color:white;width:undefined;height:undefined;"><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>
-    <div class="van-loading van-loading--spinner van-loading--black"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> <!----></span></div>
-    <div class="van-loading van-loading--spinner van-loading--white"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> <!----></span></div>
+    <div class="van-loading van-loading--spinner van-loading" style="color:#c9c9c9;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> <!----></span></div>
+    <div class="van-loading van-loading--spinner van-loading--white" style="color:white;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> <!----></span></div>
   </div>
 </div>
 `;
diff --git a/packages/loading/zh-CN.md b/packages/loading/zh-CN.md
index aaa9c044a..10ec06713 100644
--- a/packages/loading/zh-CN.md
+++ b/packages/loading/zh-CN.md
@@ -12,14 +12,14 @@ Vue.use(Loading);
 #### Circular
 
 ```html
-<van-loading color="black" />
+<van-loading />
 <van-loading color="white" />
 ```
 
 #### Spinner
 
 ```html
-<van-loading type="spinner" color="black" />
+<van-loading type="spinner" />
 <van-loading type="spinner" color="white" />
 ```
 
@@ -27,6 +27,6 @@ Vue.use(Loading);
 
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
-| color | 颜色，可选值为 `white` | `String` | `black` |
+| color | 颜色 | `String` | `#c9c9c9` |
 | type | 类型，可选值为 `spinner` | `String` | `circular` |
 | size | 大小 | `String` | `30px` |
diff --git a/packages/picker/test/__snapshots__/demo.spec.js.snap b/packages/picker/test/__snapshots__/demo.spec.js.snap
index ca91e4cf1..7a1090d57 100644
--- a/packages/picker/test/__snapshots__/demo.spec.js.snap
+++ b/packages/picker/test/__snapshots__/demo.spec.js.snap
@@ -86,7 +86,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-picker">
       <!---->
       <div class="van-picker__loading">
-        <div class="van-loading van-loading--circular van-loading--black"><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 van-loading" style="color:#c9c9c9;width:undefined;height:undefined;"><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 column1" style="height:220px;">
diff --git a/packages/pull-refresh/test/__snapshots__/index.spec.js.snap b/packages/pull-refresh/test/__snapshots__/index.spec.js.snap
index 4ae2d146d..c8e7d28c6 100644
--- a/packages/pull-refresh/test/__snapshots__/index.spec.js.snap
+++ b/packages/pull-refresh/test/__snapshots__/index.spec.js.snap
@@ -32,7 +32,7 @@ exports[`change head content when pulling down 3`] = `
       <!---->
       <!---->
       <div class="van-pull-refresh__loading">
-        <div class="van-loading van-loading--circular van-loading--black"><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 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>
     </div>
   </div>
 </div>
@@ -46,7 +46,7 @@ exports[`change head content when pulling down 4`] = `
       <!---->
       <!---->
       <div class="van-pull-refresh__loading">
-        <div class="van-loading van-loading--circular van-loading--black"><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 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>
     </div>
   </div>
 </div>
diff --git a/packages/sku/components/SkuImgUploader.vue b/packages/sku/components/SkuImgUploader.vue
index cd2e701d3..0dd253456 100644
--- a/packages/sku/components/SkuImgUploader.vue
+++ b/packages/sku/components/SkuImgUploader.vue
@@ -30,7 +30,7 @@
       <!-- 正在上传的图片,有上传等待提示 -->
       <div v-if="paddingImg" :class="b('img')">
         <img :src="paddingImg">
-        <loading :class="b('uploading')" type="spinner" color="black" />
+        <loading :class="b('uploading')" type="spinner" />
       </div>
     </div>
   </div>
diff --git a/packages/submit-bar/test/__snapshots__/demo.spec.js.snap b/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
index 1f20f4a91..a9ca687aa 100644
--- a/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
@@ -33,7 +33,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-submit-bar__bar">
         <div class="van-submit-bar__text"><span>合计：</span> <span class="van-submit-bar__price">¥ 30.50</span></div>
         <button class="van-button van-button--danger van-button--normal van-button--loading van-button--unclickable">
-          <div class="van-loading van-loading--circular van-loading--white" style="width:20px;height:20px;"><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 class="van-button__text">
+          <div class="van-loading van-loading--circular van-loading--white" style="color:white;width:20px;height:20px;"><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 class="van-button__text">
       
     </span></button>
       </div>
diff --git a/packages/switch-cell/test/__snapshots__/demo.spec.js.snap b/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
index adea272c3..0df2046d2 100644
--- a/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
+++ b/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
@@ -48,7 +48,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-cell__value">
           <div title="标题" class="van-switch van-switch--on" style="font-size:26px;">
             <div class="van-switch__node">
-              <div class="van-loading van-loading--circular van-loading--black van-switch__loading"><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 van-loading van-switch__loading" style="color:#c9c9c9;width:undefined;height:undefined;"><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>
         </div>
diff --git a/packages/switch/test/__snapshots__/demo.spec.js.snap b/packages/switch/test/__snapshots__/demo.spec.js.snap
index 92905e8d6..38c8843d8 100644
--- a/packages/switch/test/__snapshots__/demo.spec.js.snap
+++ b/packages/switch/test/__snapshots__/demo.spec.js.snap
@@ -19,7 +19,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-switch van-switch--on" style="font-size:30px;">
       <div class="van-switch__node">
-        <div class="van-loading van-loading--circular van-loading--black van-switch__loading"><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 van-loading van-switch__loading" style="color:#c9c9c9;width:undefined;height:undefined;"><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>
   </div>
diff --git a/packages/vant-css/src/loading.css b/packages/vant-css/src/loading.css
index ab2e9d73b..91e56e0bf 100644
--- a/packages/vant-css/src/loading.css
+++ b/packages/vant-css/src/loading.css
@@ -26,10 +26,13 @@
     &--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 {
@@ -64,31 +67,13 @@
     height: 100%;
 
     circle {
+      stroke: currentColor;
       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://img.yzcdn.cn/vant/gradient-circle-black.png');
-    }
-
-    .van-loading__spinner--spinner {
-      color: $gray;
-    }
-
-    circle {
-      stroke: $gray;
-    }
-  }
-
   &--white {
     .van-loading__spinner--circle {
       border-color: rgba(0, 0, 0, .1);
@@ -98,14 +83,6 @@
     .van-loading__spinner--gradient-circle {
       background-image: url('https://img.yzcdn.cn/vant/gradient-circle-white.png');
     }
-
-    .van-loading__spinner--spinner {
-      color: #fff;
-    }
-
-    circle {
-      stroke: $white;
-    }
   }
 }