diff --git a/src/loading/index.less b/src/loading/index.less
index fdb5555e5..abc72de46 100644
--- a/src/loading/index.less
+++ b/src/loading/index.less
@@ -8,14 +8,14 @@
   &__spinner {
     position: relative;
     display: inline-block;
-    width: 30px;
+    width: @loading-spinner-size;
     // compatible for 1.x, users may set width or height in root element
     max-width: 100%;
-    height: 30px;
+    height: @loading-spinner-size;
     max-height: 100%;
     color: @loading-spinner-color;
     vertical-align: middle;
-    animation: van-rotate 0.8s linear infinite;
+    animation: van-rotate @loading-spinner-animation-duration linear infinite;
 
     &--spinner {
       animation-timing-function: steps(12);
diff --git a/src/style/var.less b/src/style/var.less
index 3fc2b4b0a..5d997ed88 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -367,6 +367,8 @@
 @loading-text-color: @gray-dark;
 @loading-text-font-size: @font-size-md;
 @loading-spinner-color: @gray;
+@loading-spinner-size: 30px;
+@loading-spinner-animation-duration: .8s;
 
 // NavBar
 @nav-bar-height: 46px;