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

update loading

pull/2/head
Leopoldthecoder 2016-08-25 16:37:55 +08:00
parent 79d92a8760
commit 8422995141
2 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/loading/src/directive.js
View File

@ -32,20 +32,21 @@ exports.install = Vue => {
el.maskStyle = { el.maskStyle = {
position: 'absolute', position: 'absolute',
zIndex: '10000', zIndex: '10000',
backgroundColor: 'rgba(0, 0, 0, .7)', backgroundColor: 'rgba(0, 0, 0, .65)',
margin: '0' margin: '0'
}; };
el.spinner = document.createElement('i'); el.spinner = document.createElement('img');
el.spinner.className = 'el-icon-loading'; el.spinner.src = require('./loading-bubbles.svg');
el.spinnerStyle = { el.spinnerStyle = {
color: '#ddd', color: '#ddd',
fontSize: '32px', height: '60px',
width: '60px',
position: 'absolute', position: 'absolute',
top: '50%', top: '50%',
left: '50%', left: '50%',
marginTop: '-19px', marginTop: '-30px',
marginLeft: '-16px', marginLeft: '-30px',
zIndex: '10001' zIndex: '10001'
}; };
}, },

14
packages/loading/src/loading-bubbles.svg Normal file
View File

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="white">
<circle transform="translate(8 0)" cx="0" cy="16" r="0">
<animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0"
keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="translate(16 0)" cx="0" cy="16" r="0">
<animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0.3"
keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="translate(24 0)" cx="0" cy="16" r="0">
<animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0.6"
keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" />
</circle>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 950 B