From 217bb5c95388de93f053647a0321bd5776a79a56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E5=A5=95?=
 <Leopoldthecoder@users.noreply.github.com>
Date: Sun, 18 Dec 2016 21:34:55 +0800
Subject: [PATCH] Loading: update spinner animation, fixed #1786 (#1817)

---
 examples/docs/en-US/installation.md    |  2 +-
 packages/theme-default/src/loading.css | 24 ++++++++++++------------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/examples/docs/en-US/installation.md b/examples/docs/en-US/installation.md
index 488a327ab..f5a640134 100644
--- a/examples/docs/en-US/installation.md
+++ b/examples/docs/en-US/installation.md
@@ -4,7 +4,7 @@
 Installing with npm is recommended and it works seamlessly with [webpack](https://webpack.js.org/).
 
 ```shell
-npm i element-ui -D
+npm i element-ui -S
 ```
 
 ### CDN
diff --git a/packages/theme-default/src/loading.css b/packages/theme-default/src/loading.css
index 5f8ae6637..92a13ed31 100644
--- a/packages/theme-default/src/loading.css
+++ b/packages/theme-default/src/loading.css
@@ -19,7 +19,7 @@
         margin-top: calc(- var(--loading-fullscreen-spinner-size) / 2);
 
         .circular {
-          width: var(--loading-fullscreen-spinner-size);
+          size: var(--loading-fullscreen-spinner-size);
         }
       }
     }
@@ -39,13 +39,13 @@
     }
 
     .circular {
-      width: var(--loading-spinner-size);
-      animation: rotate 2s linear infinite;
+      size: var(--loading-spinner-size);
+      animation: loading-rotate 2s linear infinite;
     }
 
     .path {
-      animation: dash 1.5s ease-in-out infinite;
-      stroke-dasharray: 1, 100;
+      animation: loading-dash 1.5s ease-in-out infinite;
+      stroke-dasharray: 90, 150;
       stroke-dashoffset: 0;
       stroke-width: 2;
       stroke: var(--color-primary);
@@ -54,23 +54,23 @@
   }
 }
 
-@keyframes rotate {
+@keyframes loading-rotate {
   100% {
     transform: rotate(360deg);
   }
 }
 
-@keyframes dash {
+@keyframes loading-dash {
   0% {
-    stroke-dasharray: 1, 100;
+    stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
   }
   50% {
-    stroke-dasharray: 45, 100;
-    stroke-dashoffset: -35px;
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -40px;
   }
   100% {
-    stroke-dasharray: 45, 100;
-    stroke-dashoffset: -124px;
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -120px;
   }
 }