Mirrors/cloudcmd
1
0
Fork 0
mirror of https://github.com/coderaiser/cloudcmd.git synced 2026-01-22 18:29:26 +00:00
Code Issues Projects Releases Wiki Activity

feature(img) spinner: add svg

Browse source
This commit is contained in:
coderaiser 2014-03-26 14:47:23 -04:00
parent 5c27536155
commit 1b3d7b6e2e
3 changed files with 87 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

7
css/style.css
View file

@ -103,6 +103,13 @@ body {
width : 16px;
height : 16px;
vertical-align : top;
}
.loading-svg {
background : url(/img/spinner.svg);
}
.loading-gif {
background : url(/img/spinner.gif);
}

17
img/spinner.svg Normal file
View file

@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="rgb(49, 123, 249)">
<path transform="translate(2)" d="M0 12 V20 H4 V12z">
<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
</path>
<path transform="translate(8)" d="M0 12 V20 H4 V12z">
<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.2" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
</path>
<path transform="translate(14)" d="M0 12 V20 H4 V12z">
<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.4" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
</path>
<path transform="translate(20)" d="M0 12 V20 H4 V12z">
<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.6" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
</path>
<path transform="translate(26)" d="M0 12 V20 H4 V12z">
<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.8" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
</path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

81
lib/client/dom.js
View file

@ -14,34 +14,62 @@ var CloudCmd, Util, DOM, CloudFunc, Dialog;
ImagesProto = function() {
var ImagesProto = function() {
var Images = {
'image-loading' : null,
'image-error' : null
};
var Classes = 'icon',
ID = 'js-image-',
Images = {
'image-loading' : null,
'image-error' : null
};
function getImage(name) {
var id = 'js-image-' + name,
element = Images[id];
if (!element)
element = Images[id] = DOM.anyload({
name : 'span',
className : 'icon ' + name,
id : id,
not_append : true
});
function getImage(name, classes) {
var element = DOM.anyload({
name : 'span',
className : classes,
id : ID + name,
not_append : true
});
return element;
}
/* Функция создаёт картинку загрузки */
this.loading = function() {
return getImage('loading');
var classes, isSVG,
name = 'loading',
id = ID + name,
element = Images[id];
if (!element) {
classes = Classes + ' ' + name;
isSVG = DOM.isSVG();
if (isSVG)
classes += ' ' + name + '-svg';
else
classes += ' ' + name + '-gif';
Images[id] =
element = getImage(name, classes);
}
return element;
};
/* Функция создаёт картинку ошибки загрузки */
this.error = function() {
return getImage('error');
var classes,
name = 'error',
id = ID + name,
element = Images[id];
if (!element) {
classes = Classes + ' ' + name;
Images[id] =
element = getImage(name, classes);
}
return element;
};
},
Images = new ImagesProto();
@ -238,6 +266,23 @@ var CloudCmd, Util, DOM, CloudFunc, Dialog;
return (pElement || document).getElementsByClassName(pClass);
};
/**
* check svg support
*/
this.isSVG = function() {
var rect, ret,
create = document.createElementNS,
SVG_URL = 'http://www.w3.org/2000/svg';
if (create)
create = create.bind(document);
rect = create(SVG_URL,'svg').createSVGRect;
ret = !!rect;
return ret;
};
/**
* add class=hidden to element
*