CODEWITHSUNDEEP
jquerycssprogress-bar
Łukasz Młynik
Łukasz Młynik

Reputation: 632

Layering gradients on element

So I have this little progress bar from jQ UI. http://jsfiddle.net/BnqaJ/ But to the current gradient, I want to add stripes like this. http://jqueryui.com/demos/progressbar/#animated But not animated.

Upvotes: 2

Views: 1292

Answers (1)

Josh Davenport-Smith
Josh Davenport-Smith

Reputation: 5511

Perhaps you could use repeating-linear-gradient to create a CSS pattern that overlays your progress bar. See this jsfiddle: http://jsfiddle.net/joshdavenport/Qw6uv/2/. Changing the angle of the gradient appears to stop the gradient moving with the element: http://jsfiddle.net/joshdavenport/Qw6uv/4/

It degrades gracefully, without support it will just not appear, leaving the progress bar intact.

Please do see this page for further info, and browser support information

Upvotes: 3

Related Questions