diff --git a/README.md b/README.md index d822601..53f16c5 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,11 @@ Gexf-JS now speaks 7 languages: English, French, Italian, Spanish, Finnish, Turk #### Σωτήρης Φραγκίσκος (greek translation) +#### Artem Zubkov (async parsing graph, zoom back, russian translation) + +* http://artzub.com/ +* Twitter: [@artzub](http://twitter.com/artzub) + ### How to use ? ## 1. Export your graph from Gephi as a GEXF file @@ -79,4 +84,4 @@ Strings to translate : 1. Hide edges 1. Zoom In 1. Zoom Out -1. Your browser cannot properly display this page. We recommend you use the latest Firefox or Chrome version \ No newline at end of file +1. Your browser cannot properly display this page. We recommend you use the latest Firefox or Chrome version diff --git a/config.js b/config.js index 46110fe..26c337f 100644 --- a/config.js +++ b/config.js @@ -43,11 +43,19 @@ setParams({ Show the weight of edges in the list this setting can't be changed from the User Interface */ - language: false + language: false, /* Set to an ISO language code to switch the interface to that language. Available languages are English [en], French [fr], Spanish [es], Italian [it], Finnish [fi], Turkish [tr] and Greek [el]. If set to false, the language will be that of the user's browser. */ + alphaNode: .7, + /* + Change this parameter for set opacity of the nodes. + */ + alphaNodeBorder: .5 + /* + Change this parameter for set opacity of the border nodes. + */ }); diff --git a/img/zoom-reset.png b/img/zoom-reset.png new file mode 100644 index 0000000..e3879e6 Binary files /dev/null and b/img/zoom-reset.png differ diff --git a/index.html b/index.html index 84a3c3f..aa7c16a 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ Gephi: JavaScript GEXF Viewer + @@ -18,9 +19,22 @@ +
+
+
+
+ +
+
+
+
+

' + strLang("outLinks") + '

'; @@ -305,6 +344,7 @@ function changeGraphPosition(evt, echelle) { function onGraphMove(evt) { evt.preventDefault(); + GexfJS.mainCenter.backX = null; if (!GexfJS.graph) { return; } @@ -323,11 +363,13 @@ function onGraphMove(evt) { function onOverviewMove(evt) { if (GexfJS.dragOn) { + GexfJS.mainCenter.backX = null; changeGraphPosition(evt,-GexfJS.overviewScale); } } function onGraphScroll(evt, delta) { + GexfJS.totalScroll += delta; if (Math.abs(GexfJS.totalScroll) >= 1) { if (GexfJS.totalScroll < 0) { @@ -368,7 +410,6 @@ function initializeMap() { width : GexfJS.overviewWidth, height : GexfJS.overviewHeight }); - GexfJS.timeRefresh = setInterval(traceMap,60); GexfJS.graph = null; loadGraph(); } @@ -378,6 +419,13 @@ function loadGraph() { $.ajax({ url: ( document.location.hash.length > 1 ? document.location.hash.substr(1) : GexfJS.params.graphFile ), dataType: "xml", + error : function(jqXHR, textStatus, errorThrown) { + $("#error").html(textStatus + "
" + errorThrown); + $("#error").slideDown(); + + if(GexfJS.onLoaded) + GexfJS.onLoaded(this); + }, success: function(data) { var _s = new Date(); var _g = $(data).find("graph"), @@ -392,109 +440,202 @@ function loadGraph() { edgeList : [] } var _xmin = 1e9, _xmax = -1e9, _ymin = 1e9, _ymax = -1e9; _marge = 30; - $(_nodes).each(function() { - var _n = $(this), - _pos = _n.find("viz\\:position,position"), - _x = _pos.attr("x"), - _y = _pos.attr("y"); - _xmin = Math.min(_x, _xmin); - _xmax = Math.max(_x, _xmax); - _ymin = Math.min(_y, _ymin); - _ymax = Math.max(_y, _ymax); - }); - - var _echelle = Math.min( ( GexfJS.baseWidth - _marge ) / ( _xmax - _xmin ) , ( GexfJS.baseHeight - _marge ) / ( _ymax - _ymin ) ); - var _deltax = ( GexfJS.baseWidth - _echelle * ( _xmin + _xmax ) ) / 2; - var _deltay = ( GexfJS.baseHeight - _echelle * ( _ymin + _ymax ) ) / 2; - - GexfJS.ctxMini.clearRect(0, 0, GexfJS.overviewWidth, GexfJS.overviewHeight); - - $(_nodes).each( function() { - var _n = $(this), - _id = _n.attr("id"), - _label = _n.attr("label") || _id, - _d = { - id: _id, - label: _label - }, + + var nextMethod = 0; + + var len = $(_nodes).length; + var i = 0; + var step = 0; + var curPos = 0; + + var calcRange = function(focusItem) { + if (focusItem) { + var _n = $(focusItem), _pos = _n.find("viz\\:position,position"), _x = _pos.attr("x"), - _y = _pos.attr("y"), - _size = _n.find("viz\\:size,size").attr("value"), - _col = _n.find("viz\\:color,color"), - _r = _col.attr("r"), - _g = _col.attr("g"), - _b = _col.attr("b"), - _attr = _n.find("attvalue"); - _d.coords = { - base : { - x : _deltax + _echelle * _x, - y : _deltay - _echelle * _y, - r : _echelle * _size + _y = _pos.attr("y"); + _xmin = Math.min(_x, _xmin); + _xmax = Math.max(_x, _xmax); + _ymin = Math.min(_y, _ymin); + _ymax = Math.max(_y, _ymax); + if (step < curPos++) { + curPos = 0; + if(GexfJS.onLoading) + GexfJS.onLoading(i, len, "Loading... (" + i + " of " + len + ")"); } } - _d.color = { - rgb : { - r : _r, - g : _g, - b : _b - }, - base : "rgba(" + _r + "," + _g + "," + _b + ",.7)", - gris : "rgba(" + Math.floor(84 + .33 * _r) + "," + Math.floor(84 + .33 * _g) + "," + Math.floor(84 + .33 * _b) + ",.5)" + else { + nextMethod++; + if(GexfJS.onLoading) + GexfJS.onLoading(len, len, "Loading... (" + len + " of " + len + ")"); } - _d.attributes = []; - $(_attr).each(function() { - var _a = $(this), - _for = _a.attr("for"); - _d.attributes[ _for ? _for : 'attribute_' + _a.attr("id") ] = _a.attr("value"); - }); - GexfJS.graph.nodeIndexById.push(_id); - GexfJS.graph.nodeIndexByLabel.push(_label.toLowerCase()); - GexfJS.graph.nodeList.push(_d); - GexfJS.ctxMini.fillStyle = _d.color.base; - GexfJS.ctxMini.beginPath(); - GexfJS.ctxMini.arc( _d.coords.base.x * GexfJS.overviewScale , _d.coords.base.y * GexfJS.overviewScale , _d.coords.base.r * GexfJS.overviewScale + 1 , 0 , Math.PI*2 , true ); - GexfJS.ctxMini.closePath(); - GexfJS.ctxMini.fill(); - }); - - $(_edges).each(function() { - var _e = $(this), - _sid = _e.attr("source"), - _six = GexfJS.graph.nodeIndexById.indexOf(_sid); - _tid = _e.attr("target"), - _tix = GexfJS.graph.nodeIndexById.indexOf(_tid); - _w = _e.find('attvalue[for="weight"]').attr('value') || _e.attr('weight'); - _col = _e.find("color"); - if (_col.length) { - var _r = _col.attr("r"), + } + + var _echelle = 0; + var _deltax = 0; + var _deltay = 0; + + var parseNodes = function(focusItem) { + if (focusItem) { + var _n = $(focusItem), + _id = _n.attr("id"), + _label = _n.attr("label") || _id, + _d = { + id: _id, + label: _label + }, + _pos = _n.find("viz\\:position,position"), + _x = _pos.attr("x"), + _y = _pos.attr("y"), + _size = _n.find("viz\\:size,size").attr("value"), + _col = _n.find("viz\\:color,color"), + _r = _col.attr("r"), _g = _col.attr("g"), - _b = _col.attr("b"); - } else { - var _scol = GexfJS.graph.nodeList[_six].color.rgb; - if (GexfJS.graph.directed) { - var _r = _scol.r, - _g = _scol.g, - _b = _scol.b; + _b = _col.attr("b"), + _attr = _n.find("attvalue"); + _d.coords = { + base : { + x : _deltax + _echelle * _x, + y : _deltay - _echelle * _y, + r : _echelle * _size + } + } + _d.color = { + rgb : { + r : _r, + g : _g, + b : _b + }, + base : "rgba(" + _r + "," + _g + "," + _b + "," + GexfJS.params.alphaNode + ")", + gris : "rgba(" + Math.floor(84 + .33 * _r) + "," + Math.floor(84 + .33 * _g) + "," + Math.floor(84 + .33 * _b) + "," + GexfJS.params.alphaNodeBorder + ")" + } + _d.attributes = []; + $(_attr).each(function() { + var _a = $(this), + _for = _a.attr("for"); + _d.attributes[ _for ? _for : 'attribute_' + _a.attr("id") ] = _a.attr("value"); + }); + GexfJS.graph.nodeIndexById.push(_id); + GexfJS.graph.nodeIndexByLabel.push(_label.toLowerCase()); + GexfJS.graph.nodeList.push(_d); + GexfJS.ctxMini.fillStyle = _d.color.base; + GexfJS.ctxMini.beginPath(); + GexfJS.ctxMini.arc( _d.coords.base.x * GexfJS.overviewScale , _d.coords.base.y * GexfJS.overviewScale , _d.coords.base.r * GexfJS.overviewScale + 1 , 0 , Math.PI*2 , true ); + GexfJS.ctxMini.closePath(); + GexfJS.ctxMini.fill(); + if (step < curPos++) { + curPos = 0; + if(GexfJS.onLoading) + GexfJS.onLoading(i, len, "Parsing nodes... (" + i + " of " + len + ")"); + } + } + else { + nextMethod++; + if(GexfJS.onLoading) + GexfJS.onLoading(len, len, "Parsing nodes... (" + len + " of " + len + ")"); + } + } + + var parseEdges = function(focusItem) { + if (focusItem) { + var _e = $(focusItem), + _sid = _e.attr("source"), + _six = GexfJS.graph.nodeIndexById.indexOf(_sid); + _tid = _e.attr("target"), + _tix = GexfJS.graph.nodeIndexById.indexOf(_tid); + _label = _e.attr("label") || undefined, + _w = _e.find('attvalue[for="weight"]').attr('value') || _e.attr('weight'); + _col = _e.find("color"); + if (_col.length) { + var _r = _col.attr("r"), + _g = _col.attr("g"), + _b = _col.attr("b"); } else { - var _tcol = GexfJS.graph.nodeList[_tix].color.rgb, - _r = Math.floor( .5 * _scol.r + .5 * _tcol.r ), - _g = Math.floor( .5 * _scol.g + .5 * _tcol.g ), - _b = Math.floor( .5 * _scol.b + .5 * _tcol.b ); + var _scol = GexfJS.graph.nodeList[_six].color.rgb; + if (GexfJS.graph.directed) { + var _r = _scol.r, + _g = _scol.g, + _b = _scol.b; + } else { + var _tcol = GexfJS.graph.nodeList[_tix].color.rgb, + _r = Math.floor( .5 * _scol.r + .5 * _tcol.r ), + _g = Math.floor( .5 * _scol.g + .5 * _tcol.g ), + _b = Math.floor( .5 * _scol.b + .5 * _tcol.b ); + } + } + GexfJS.graph.edgeList.push({ + source : _six, + target : _tix, + label : _label, + width : ( _w ? _w : 1 ) * _echelle, + weight : _w || false, + color : "rgba(" + _r + "," + _g + "," + _b + ",.7)" + }); + if (step < curPos++) { + curPos = 0; + if(GexfJS.onLoading) + GexfJS.onLoading(i, len, "Parsing edges... (" + i + " of " + len + ")"); } } - GexfJS.graph.edgeList.push({ - source : _six, - target : _tix, - width : ( _w ? _w : 1 ) * _echelle, - weight : _w || false, - color : "rgba(" + _r + "," + _g + "," + _b + ",.7)" - }); - }); - - GexfJS.imageMini = GexfJS.ctxMini.getImageData(0, 0, GexfJS.overviewWidth, GexfJS.overviewHeight); - - //changeNiveau(0); + else { + nextMethod++; + if(GexfJS.onLoading) + GexfJS.onLoading(len, len, "Parsing edges... (" + len + " of " + len + ")"); + } + } + + var poolMethods = [ calcRange, parseNodes, parseEdges ]; + var lastMethod = -1; + var curArr = null; + + var run = function() { + var changeMethod = lastMethod != nextMethod; + var runTime = false; + + if (changeMethod) { + if(GexfJS.onLoading) + GexfJS.onLoading(len, len); + switch (nextMethod){ + case 0: + curArr = _nodes; + break; + case 1: + _echelle = Math.min( ( GexfJS.baseWidth - _marge ) / ( _xmax - _xmin ) , ( GexfJS.baseHeight - _marge ) / ( _ymax - _ymin ) ); + _deltax = ( GexfJS.baseWidth - _echelle * ( _xmin + _xmax ) ) / 2; + _deltay = ( GexfJS.baseHeight - _echelle * ( _ymin + _ymax ) ) / 2; + + GexfJS.ctxMini.clearRect(0, 0, GexfJS.overviewWidth, GexfJS.overviewHeight); + break; + case 2: + curArr = _edges; + + break; + } + len = $(curArr).length; + i = 0; + step = parseInt(len / 25); + lastMethod = nextMethod; + } + var focusItem = null; + if (i < len) + focusItem = curArr[i++]; + if (nextMethod < poolMethods.length) + setTimeout(function() { + if (poolMethods[nextMethod]) + poolMethods[nextMethod](focusItem); + run(); + }, 1); + else { + GexfJS.imageMini = GexfJS.ctxMini.getImageData(0, 0, GexfJS.overviewWidth, GexfJS.overviewHeight); + + if(GexfJS.onLoaded) + GexfJS.onLoaded(this); + + GexfJS.timeRefresh = setInterval(traceMap,60); + } + } + run(); + //changeNiveau(0); } }); } @@ -612,6 +753,11 @@ function traceMap() { } var _displayEdges = ( GexfJS.params.showEdges && GexfJS.params.currentNode == -1 ); + + if (_centralNode != -1) { + var _dnc = GexfJS.graph.nodeList[_centralNode]; + _dnc.coords.real = ( (GexfJS.params.useLens && GexfJS.mousePosition ) ? calcCoord( GexfJS.mousePosition.x , GexfJS.mousePosition.y , _dnc.coords.actual ) : _dnc.coords.actual ); + } for (var i in GexfJS.graph.edgeList) { var _d = GexfJS.graph.edgeList[i], @@ -640,17 +786,37 @@ function traceMap() { var _coords = ( ( GexfJS.params.useLens && GexfJS.mousePosition ) ? calcCoord( GexfJS.mousePosition.x , GexfJS.mousePosition.y , _ds.coords.actual ) : _ds.coords.actual ); _coordt = ( (GexfJS.params.useLens && GexfJS.mousePosition) ? calcCoord( GexfJS.mousePosition.x , GexfJS.mousePosition.y , _dt.coords.actual ) : _dt.coords.actual ); GexfJS.ctxGraphe.strokeStyle = ( _isLinked ? _d.color : "rgba(100,100,100,0.2)" ); + + if (_centralNode != -1 && + _d.label && + (_six == _centralNode || _tix == _centralNode)) { + + var _fs = Math.max(_limTxt + 2, (_six == _centralNode ? _coords.r : _coordt.r ) * _textSizeFactor) + 2; + + var x3 = _coords.x; + var y3 = _coords.y; + var x4 = _coordt.x; + var y4 = _coordt.y; + if (GexfJS.params.curvedEdges) { + x3 = .3 * _coordt.y - .3 * _coords.y + .8 * _coords.x + .2 * _coordt.x; + y3 = .8 * _coords.y + .2 * _coordt.y - .3 * _coordt.x + .3 * _coords.x; + x4 = .3 * _coordt.y - .3 * _coords.y + .2 * _coords.x + .8 * _coordt.x; + y4 = .2 * _coords.y + .8 * _coordt.y - .3 * _coordt.x + .3 * _coords.x; + } + + GexfJS.ctxGraphe.fillStyle = "rgb(0,0,0)"; + GexfJS.ctxGraphe.font = Math.floor( _fs )+"px Arial"; + GexfJS.ctxGraphe.textAlign = "center"; + GexfJS.ctxGraphe.textBaseline = "middle"; + GexfJS.ctxGraphe.fillText(_d.label, x3 - (x3 - x4)/2, y3 - (y3 - y4) / 2); + } + traceArc(GexfJS.ctxGraphe, _coords, _coordt); } } GexfJS.ctxGraphe.lineWidth = 4; GexfJS.ctxGraphe.strokeStyle = "rgba(0,100,0,0.8)"; - if (_centralNode != -1) { - var _dnc = GexfJS.graph.nodeList[_centralNode]; - _dnc.coords.real = ( (GexfJS.params.useLens && GexfJS.mousePosition ) ? calcCoord( GexfJS.mousePosition.x , GexfJS.mousePosition.y , _dnc.coords.actual ) : _dnc.coords.actual ); - } - for (var i in GexfJS.graph.nodeList) { var _d = GexfJS.graph.nodeList[i]; if (_d.visible && _d.withinFrame) { @@ -764,10 +930,13 @@ function updateAutoComplete(_sender) { function updateButtonStates() { $("#lensButton").attr("class",GexfJS.params.useLens?"":"off") - .attr("title", strLang( GexfJS.params.showEdges ? "lensOff" : "lensOn" ) ); + .attr("title", strLang( GexfJS.params.useLens ? "lensOff" : "lensOn" ) ); $("#edgesButton").attr("class",GexfJS.params.showEdges?"":"off") .attr("title", strLang( GexfJS.params.showEdges ? "edgeOff" : "edgeOn" ) ); + + $("#zoomReset").attr("class",GexfJS.params.zoomReset?"":"off") + .attr("title", strLang( GexfJS.params.zoomReset ? "zoomReset" : "zoomSet" ) ); } function setParams(paramlist) { @@ -776,6 +945,30 @@ function setParams(paramlist) { } } +function resetZoom() { + var lvl = GexfJS.mainCenter.lvl, + x = GexfJS.mainCenter.x, + y = GexfJS.mainCenter.y; + GexfJS.params.zoomReset = false; + if(GexfJS.mainCenter.backX) { + GexfJS.params.zoomReset = true; + lvl = GexfJS.mainCenter.backZoomLevel; + x = GexfJS.mainCenter.backX; + y = GexfJS.mainCenter.backY; + GexfJS.mainCenter.backX = null; + } + else { + GexfJS.mainCenter.backZoomLevel = GexfJS.params.zoomLevel; + GexfJS.mainCenter.backX = GexfJS.params.centreX; + GexfJS.mainCenter.backY = GexfJS.params.centreY; + } + GexfJS.params.centreX = x; + GexfJS.params.centreY = y; + GexfJS.params.zoomLevel = lvl; + updateButtonStates(); + $("#zoomSlider").slider("value",GexfJS.params.zoomLevel); +} + $(document).ready(function() { var lang = ( @@ -797,16 +990,47 @@ $(document).ready(function() { $("#bulle").html('

' + strLang("browserErr") + '

'); return; } - + + GexfJS.proBar = document.getElementById('probar'); + GexfJS.onLoading = function(pos, maxResults, state) { + if(pos && pos < 0) + pos = -pos; + pos = !maxResults || !pos ? '0%' : (parseInt(pos * 100 / maxResults)) + '%'; + GexfJS.proBar.style.width = pos; + GexfJS.proBar.textContent = pos + " " + (state || ""); + } + GexfJS.params.zoomReset = true; updateButtonStates(); GexfJS.ctxGraphe = document.getElementById('carte').getContext('2d'); GexfJS.ctxMini = document.getElementById('overview').getContext('2d'); updateWorkspaceBounds(); - - initializeMap(); - - window.onhashchange = initializeMap; + + GexfJS.doHashChange = function() { + $("#error").hide(); + $("#overwindow").show(); + if (!GexfJS.onHashChange) + GexfJS.onHashChange = function() { + initializeMap(); + } + $("#top-box-cont > div").hide(); + $("#progb").show(); + GexfJS.onLoading(); + GexfJS.onLoaded = function(item) { + $("#overwindow").hide(); + if (( !GexfJS.graph + || !GexfJS.graph.nodeList + || GexfJS.graph.nodeList.length < 1)) { + if (GexfJS.params.onErrorLoaded) + GexfJS.params.onErrorLoaded(); + } + } + GexfJS.onHashChange(); + } + + GexfJS.doHashChange(); + + window.onhashchange = GexfJS.doHashChange; $("#searchinput") .focus(function() { @@ -886,6 +1110,11 @@ $(document).ready(function() { return false; }) .attr("title", strLang("zoomIn")); + $("#zoomReset").click(function() { + resetZoom(); + return false; + }) + .attr("title", strLang("zoomReset")); $(document).click(function(evt) { $("#autocomplete").slideUp(); }); @@ -926,4 +1155,10 @@ $(document).ready(function() { } return false; }); + GexfJS.mainCenter = { + backX : false, + lvl : GexfJS.params.zoomLevel, + x : GexfJS.params.centreX, + y : GexfJS.params.centreY + }; }); \ No newline at end of file diff --git a/styles/gexfjs.css b/styles/gexfjs.css index 8818c6e..9337de8 100644 --- a/styles/gexfjs.css +++ b/styles/gexfjs.css @@ -26,7 +26,6 @@ body { position: absolute; left: 0; top: 0; width: 250px; text-align: center; } - h1 { margin:0; } @@ -44,7 +43,9 @@ h1 a { #searchinput { background: #fff url(../img/search.gif) no-repeat right; border: 1px solid #DDD; - font-size: 14px; line-height: 14px, height: 14px; + font-size: 14px; + line-height: 14px; + height: 14px; left: 250px; padding: 1px 4px; margin: 0; position: absolute; @@ -109,10 +110,30 @@ h1 a { background-position: -24px 0; } -#lensButton, #edgesButton { +#lensButton, #edgesButton, #zoomReset { display: block; width: 36px; height: 36px; background:url(../img/loupe-edges.png); margin: 0 auto; } +#zoomReset { + background:url(../img/zoom-reset.png); +} + +#zoomReset { + background-position: 0px 0; +} + +#zoomReset:hover { + background-position: -36px 0; +} + +#zoomReset.off { + background-position: -72px 0; +} + +#zoomReset.off:hover { + background-position: -108px 0; +} + #lensButton { background-position: -72px 0; } @@ -271,4 +292,61 @@ a:hover { #autocomplete img { float: left; border: 0; width: 24px; height: 24px; margin: 2px 6px; +} + +#overwindow { + overflow: hidden; +} + +.box_top { + z-index: 1000; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + overflow: auto; +} +.box_override { + position: absolute; + top: 0; + left: 0; + opacity: .5; + z-index: 999; + height: 100%; + width: 100%; + overflow: hidden; + background: #000000; +} + +.prog { + margin: 35% 80px 0; +} + +#probar { + text-align: center; + vertical-align: middle; + color: white; + text-shadow: 0 1px 1px black; + padding-top: 2px; +} + +#progb { + overflow: hidden; + width: 100%; + /*display: none;*/ +} + +#error { + position: absolute; + top: 45px; + left: 20px; + z-index: 2; + padding: 6px; + background: #fdf5ce; + border: 1px dotted #F9E16C; + border-top: 0; + color: #F9746C; + font-size: 10pt; + font-weight: bold; } \ No newline at end of file diff --git a/styles/probar.css b/styles/probar.css new file mode 100644 index 0000000..011b8fd --- /dev/null +++ b/styles/probar.css @@ -0,0 +1,99 @@ +.meter { + height: 20px; + position: relative; + margin: 20px 0 20px 0; + background: #555; + padding: 10px; + -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3); + -moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3); + box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3); +} +.meter > span { + display: block; + height: 100%; + background-color: rgb(43,194,83); + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, rgb(43,194,83)), + color-stop(1, rgb(84,240,84)) + ); + background-image: -moz-linear-gradient( + center bottom, + rgb(43,194,83) 37%, + rgb(84,240,84) 69% + ); + -webkit-box-shadow: + inset 0 2px 9px rgba(255,255,255,0.3), + inset 0 -2px 6px rgba(0,0,0,0.4); + -moz-box-shadow: + inset 0 2px 9px rgba(255,255,255,0.3), + inset 0 -2px 6px rgba(0,0,0,0.4); + box-shadow: + inset 0 2px 9px rgba(255,255,255,0.3), + inset 0 -2px 6px rgba(0,0,0,0.4); + position: relative; + overflow: hidden; +} +.meter > span:after, .animate > span > span { + content: ""; + position: absolute; + top: 0; left: 0; bottom: 0; right: 0; + background-image: + -webkit-gradient(linear, 0 0, 100% 100%, + color-stop(.25, rgba(255, 255, 255, .2)), + color-stop(.25, transparent), color-stop(.5, transparent), + color-stop(.5, rgba(255, 255, 255, .2)), + color-stop(.75, rgba(255, 255, 255, .2)), + color-stop(.75, transparent), to(transparent) + ); + background-image: + -moz-linear-gradient( + -45deg, + rgba(255, 255, 255, .2) 25%, + transparent 25%, + transparent 50%, + rgba(255, 255, 255, .2) 50%, + rgba(255, 255, 255, .2) 75%, + transparent 75%, + transparent + ); + z-index: 1; + -webkit-background-size: 50px 50px; + -moz-background-size: 50px 50px; + -webkit-animation: move 2s linear infinite; + overflow: hidden; +} + +.animate > span:after { + display: none; +} + +@-webkit-keyframes move { + 0% { + background-position: 0 0; + } + 100% { + background-position: 50px 50px; + } +} + +.orange > span { + background-color: #f1a165; + background-image: -moz-linear-gradient(top, #f1a165, #f36d0a); + background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a)); + background-image: -webkit-linear-gradient(#f1a165, #f36d0a); +} + +.red > span { + background-color: #f0a3a3; + background-image: -moz-linear-gradient(top, #f0a3a3, #f42323); + background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323)); + background-image: -webkit-linear-gradient(#f0a3a3, #f42323); +} + +.nostripes > span > span, .nostripes > span:after { + -webkit-animation: none; + background-image: none; +}