github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Loading: update spinner animation, fixed #1786 (#1817)

pull/1818/head
杨奕 2016-12-18 21:34:55 +08:00 committed by cinwell.li
parent 92742dc56a
commit 217bb5c953
2 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/docs/en-US/installation.md
View File

@ -4,7 +4,7 @@
Installing with npm is recommended and it works seamlessly with [webpack](https://webpack.js.org/). Installing with npm is recommended and it works seamlessly with [webpack](https://webpack.js.org/).
```shell ```shell
npm i element-ui -D npm i element-ui -S
``` ```
### CDN ### CDN

24
packages/theme-default/src/loading.css
View File

@ -19,7 +19,7 @@
margin-top: calc(- var(--loading-fullscreen-spinner-size) / 2); margin-top: calc(- var(--loading-fullscreen-spinner-size) / 2);
.circular { .circular {
width: var(--loading-fullscreen-spinner-size); size: var(--loading-fullscreen-spinner-size);
} }
} }
} }
@ -39,13 +39,13 @@
} }
.circular { .circular {
width: var(--loading-spinner-size); size: var(--loading-spinner-size);
animation: rotate 2s linear infinite; animation: loading-rotate 2s linear infinite;
} }
.path { .path {
animation: dash 1.5s ease-in-out infinite; animation: loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 1, 100; stroke-dasharray: 90, 150;
stroke-dashoffset: 0; stroke-dashoffset: 0;
stroke-width: 2; stroke-width: 2;
stroke: var(--color-primary); stroke: var(--color-primary);
@ -54,23 +54,23 @@
} }
} }
@keyframes rotate { @keyframes loading-rotate {
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
@keyframes dash { @keyframes loading-dash {
0% { 0% {
stroke-dasharray: 1, 100; stroke-dasharray: 1, 200;
stroke-dashoffset: 0; stroke-dashoffset: 0;
} }
50% { 50% {
stroke-dasharray: 45, 100; stroke-dasharray: 90, 150;
stroke-dashoffset: -35px; stroke-dashoffset: -40px;
} }
100% { 100% {
stroke-dasharray: 45, 100; stroke-dasharray: 90, 150;
stroke-dashoffset: -124px; stroke-dashoffset: -120px;
} }
} }