From c0b19914146047a788cbcf8f5d8ff30501eee5c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BD=AD=E6=98=9F=28666595=29?= <666595@nd.com.cn>
Date: Thu, 8 Aug 2019 22:00:57 +0800
Subject: [PATCH] =?UTF-8?q?fix(h5):=20=E4=BF=AE=E5=A4=8Dh5=E4=B8=8BonPullT?=
 =?UTF-8?q?oRefresh=E7=BC=BA=E5=B0=91loading=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/pull-down-refresh/index.js | 24 ++++++++-----
 .../pull-down-refresh/style/index.css         | 36 ++++++++++++++++---
 2 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/packages/taro-components/src/components/pull-down-refresh/index.js b/packages/taro-components/src/components/pull-down-refresh/index.js
index 1c91d38ed0e7..c8cb57d4552a 100644
--- a/packages/taro-components/src/components/pull-down-refresh/index.js
+++ b/packages/taro-components/src/components/pull-down-refresh/index.js
@@ -248,16 +248,24 @@ class PullToRefresh extends Nerv.Component {
         render={() => children} />
     )
 
-    const renderRefresh = (cls) => {
-      const cla = classNames(cls, !this.state.dragOnEdge && `${prefixCls}-transition`)
+    const renderRefresh = cls => {
+      const { currSt, dragOnEdge } = this.state
+      const cla = classNames(cls, !dragOnEdge && `${prefixCls}-transition`)
+      const showIndicator = currSt === 'activate' || currSt === 'release'
       return (
         <div className={`${prefixCls}-content-wrapper`}>
-          <div className={cla} ref={el => {
-            this.contentRef = el
-          }}>
-            {/* <div className={`${prefixCls}-indicator`}>
-              {(indicator)[this.state.currSt] || (INDICATOR)[this.state.currSt]}
-            </div> */}
+          <div
+            className={cla}
+            ref={el => {
+              this.contentRef = el
+            }}>
+            {showIndicator && (
+              <div className={`${prefixCls}-indicator`}>
+                <div />
+                <div />
+                <div />
+              </div>
+            )}
             {renderChildren}
           </div>
         </div>
diff --git a/packages/taro-components/src/components/pull-down-refresh/style/index.css b/packages/taro-components/src/components/pull-down-refresh/style/index.css
index cd297644a54b..14e2b5e39985 100644
--- a/packages/taro-components/src/components/pull-down-refresh/style/index.css
+++ b/packages/taro-components/src/components/pull-down-refresh/style/index.css
@@ -9,13 +9,41 @@
   transition: transform 0.3s;
 }
 
+
+@keyframes rmc-pull-to-refresh-indicator {
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 .rmc-pull-to-refresh-indicator {
-  color: grey;
   text-align: center;
-  height: 25px;
-  line-height: 25px;
+  height: 30px;
+  line-height: 10px;
 }
 
+.rmc-pull-to-refresh-indicator > div {
+  background-color: grey;
+  width: 6px;
+  height: 6px;
+  border-radius: 100%;
+  margin: 3px;
+  animation-fill-mode: both;
+  display: inline-block;
+  animation: rmc-pull-to-refresh-indicator 0.5s 0s infinite linear;
+}
+.rmc-pull-to-refresh-indicator > div:nth-child(0) {
+  animation-delay: -0.1s !important;
+}
+.rmc-pull-to-refresh-indicator > div:nth-child(1) {
+  animation-delay: -0.2s !important;
+}
+.rmc-pull-to-refresh-indicator > div:nth-child(2) {
+  animation-delay: -0.3s !important;
+}
 .rmc-pull-to-refresh-down .rmc-pull-to-refresh-indicator {
   margin-top: -25px;
-}
\ No newline at end of file
+}