Skip to content

Commit b6a89a8

Browse files
kborcherskborchers
committed
Progressbar: Use CSS animations where supported and fall back to an animated gif
1 parent 0318720 commit b6a89a8

File tree

7 files changed

+73
-25
lines changed

7 files changed

+73
-25
lines changed

‎demos/progressbar/indeterminate.html

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,33 +18,44 @@
1818
var target = $( event.target ),
1919
pbar = $( "#progressbar" ),
2020
pbarValue = pbar.find( ".ui-progressbar-value" );
21+
2122
if ( target.is( "#numButton" ) ) {
22-
pbar.progressbar( "option", {
23-
value: Math.floor( Math.random() * 100 ),
24-
animation: false
25-
});
23+
pbarValue.css( "background-color", "inherit" );
24+
pbar
25+
.removeClass( "ui-progressbar-animated-light ui-progressbar-animated-dark" )
26+
.progressbar( "option", {
27+
value: Math.floor( Math.random() * 100 )
28+
});
2629
} else if ( target.is( "#colorButton" ) ) {
2730
pbarValue.css({
28-
background: "none",
2931
"background-color": '#' + Math.floor( Math.random() * 16777215 ).toString( 16 )
3032
});
3133
} else {
32-
if ( target.is( "#falseButton" ) ) {
33-
pbar.progressbar( "option", "animation", "light" );
34+
if ( target.is( "#falseButtonLight" ) ) {
35+
pbar
36+
.addClass( "ui-progressbar-animated-light" )
37+
.removeClass( "ui-progressbar-animated-dark" );
3438
} else {
35-
pbar.progressbar( "option", "animation", "dark" );
39+
pbar
40+
.addClass( "ui-progressbar-animated-dark" )
41+
.removeClass( "ui-progressbar-animated-light" );
3642
}
3743
pbar.progressbar( "option", "value", false );
3844
}
3945
});
4046
});
4147
</script>
48+
<style>
49+
#progressbar .ui-progressbar-value {
50+
background-color: #CCCCCC;
51+
}
52+
</style>
4253
</head>
4354
<body>
4455

45-
<div id="progressbar"></div>
56+
<div id="progressbar" class="ui-progressbar-animated-light"></div>
4657
<button id="numButton">Random Value - Determinate</button>
47-
<button id="falseButton">Indeterminate - Light</button>
58+
<button id="falseButtonLight">Indeterminate - Light</button>
4859
<button id="falseButtonDark">Indeterminate - Dark</button>
4960
<button id="colorButton">Random Color</button>
5061

‎themes/base/images/pb-animated-dark.png

287 Bytes
Loading

‎themes/base/images/pb-animated-light.png

285 Bytes
Loading

‎themes/base/images/pb-overlay-dark.gif renamed to ‎themes/base/images/pb-overlay-animated-dark.gif

File renamed without changes.

‎themes/base/images/pb-overlay.gif renamed to ‎themes/base/images/pb-overlay-animated-light.gif

File renamed without changes.

‎themes/base/jquery.ui.progressbar.css

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,36 @@
1111
.ui-progressbar { height:2em; text-align: left; overflow: hidden; }
1212
.ui-progressbar .ui-progressbar-value { margin: -1px; height:100%; }
1313

14+
@-webkit-keyframes bg-anim {
15+
from { background-position: 40px 0 }
16+
to { background-position: 0 0 }
17+
}
18+
@-moz-keyframes bg-anim {
19+
from { background-position: 40px 0 }
20+
to { background-position: 0 0 }
21+
}
22+
@-ms-keyframes bg-anim {
23+
from { background-position: 40px 0 }
24+
to { background-position: 0 0 }
25+
}
26+
@keyframes bg-anim {
27+
from { background-position: 40px 0 }
28+
to { background-position: 0 0 }
29+
}
30+
31+
.ui-progressbar .ui-progressbar-animated-light { background: url("images/pb-animated-light.png"); }
32+
.ui-progressbar .ui-progressbar-animated-dark { background: url("images/pb-animated-dark.png"); }
33+
.ui-progressbar .ui-progressbar-animated-light, .ui-progressbar .ui-progressbar-animated-dark {
34+
-webkit-animation: bg-anim 1.5s linear infinite;
35+
-moz-animation: bg-anim 1.5s linear infinite;
36+
-ms-animation: bg-anim 1.5s linear infinite;
37+
animation: bg-anim 1.5s linear infinite;
38+
}
39+
1440
.ui-progressbar-overlay {
1541
height: 100%;
1642
filter: alpha(opacity=40);
1743
opacity: 0.4;
1844
}
19-
20-
.ui-progressbar .ui-progressbar-animated { background: url("images/pb-overlay.gif"); }
21-
.ui-progressbar .ui-progressbar-animated-dark { background: url("images/pb-overlay-dark.gif"); }
45+
.ui-progressbar .ui-progressbar-value .ui-progressbar-animated-light { background: url("images/pb-overlay-animated-light.gif"); }
46+
.ui-progressbar .ui-progressbar-value .ui-progressbar-animated-dark { background: url("images/pb-overlay-animated-dark.gif"); }

‎ui/jquery.ui.progressbar.js

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ $.widget( "ui.progressbar", {
3333
"aria-valuemax": this.options.max
3434
});
3535

36-
this.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'><div class='ui-progressbar-overlay'></div></div>" )
36+
this.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'><div></div></div>" )
3737
.appendTo( this.element );
3838

3939
this.oldValue = this._value();
@@ -93,18 +93,13 @@ $.widget( "ui.progressbar", {
9393
percentage = this._percentage(),
9494
overlay = this.valueDiv.children().eq( 0 );
9595

96-
if ( isNaN( value ) || this.options.animation ) {
97-
if ( this.options.animation === "dark" ) {
98-
overlay
99-
.addClass( "ui-progressbar-animated-dark" )
100-
.removeClass( "ui-progressbar-animated" );
101-
} else {
102-
overlay
103-
.addClass( "ui-progressbar-animated" )
104-
.removeClass( "ui-progressbar-animated-dark" );
105-
}
96+
if ( this._hasAnimationSupport() ) {
97+
this.valueDiv.toggleClass( "ui-progressbar-animated-light", this.element.is( ".ui-progressbar-animated-light" ) );
98+
this.valueDiv.toggleClass( "ui-progressbar-animated-dark", this.element.is( ".ui-progressbar-animated-dark" ) );
10699
} else {
107-
overlay.removeClass( "ui-progressbar-animated ui-progressbar-animated-dark" );
100+
overlay.toggleClass( "ui-progressbar-overlay", this.element.is( "[class*='ui-progressbar-animated-']" ) );
101+
overlay.toggleClass( "ui-progressbar-animated-light", this.element.is( ".ui-progressbar-animated-light" ) );
102+
overlay.toggleClass( "ui-progressbar-animated-dark", this.element.is( ".ui-progressbar-animated-dark" ) );
108103
}
109104

110105
if ( this.oldValue !== value && ( !isNaN( this.oldValue ) || !isNaN( value ) ) ) {
@@ -121,6 +116,23 @@ $.widget( "ui.progressbar", {
121116
} else {
122117
this.element.attr( "aria-valuenow", value );
123118
}
119+
},
120+
121+
_hasAnimationSupport: function() {
122+
// Adapted from MDN test https://developer.mozilla.org/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support
123+
if ( this.element[ 0 ].style.animationName ) {
124+
return true;
125+
}
126+
127+
var domPrefixes = "Webkit Moz O ms Khtml".split( " " ),
128+
i;
129+
for( i = 0; i < domPrefixes.length; i++ ) {
130+
if( this.element[ 0 ].style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
131+
return true;
132+
}
133+
}
134+
135+
return false;
124136
}
125137
});
126138

0 commit comments

Comments
 (0)