keylogger Posted September 18, 2012 Share Posted September 18, 2012 You’ve seen progress bars everywhere, they are those bars that display the current completion state for a process, such as a download or file transfer. Whether you’re building a desktop or a web application, at a certain point, you may need to use this UI element. Having said that, in this article you’ll learn how to create stylish and animated progress bars using CSS3. This is the hidden content, please Sign In or Sign Up This is the hidden content, please Sign In or Sign Up THE HTML The markup could not be simpler than that: This is the hidden content, please Sign In or Sign Up [HIGHLIGHT].progress-bar[/HIGHLIGHT] – defines the general styles for our progress bar. [HIGHLIGHT].blue[/HIGHLIGHT] – in this case, the blue CSS class add a blue style for the progress bar. [HIGHLIGHT].stripes[/HIGHLIGHT] – animation type for the current progress bar. [HIGHLIGHT]span[/HIGHLIGHT] – this will help you filling the progress bar. An inline set width will help you specifying the “fill” state. THE CSS General styles for the CSS3 progress bar and filled area: This is the hidden content, please Sign In or Sign Up This is the hidden content, please Sign In or Sign Up Let’s add some color/gradients: This is the hidden content, please Sign In or Sign Up Stripes You may have seen this CSS3 technique before, I just adapted it a little for this example: This is the hidden content, please Sign In or Sign Up This is the hidden content, please Sign In or Sign Up Shine Not sure if this is the best name I could find for this CSS3 animation, but here we go: This is the hidden content, please Sign In or Sign Up This CSS3 progress bar example uses an CSS3 [HIGHLIGHT]::after[/HIGHLIGHT] pseudo-element which animates. Currently, animating generated content with CSS3 is available only on latest Firefox browsers. I hope that soon it will be a wider support for that. This is the hidden content, please Sign In or Sign Up Glow CSS3 keyframes animation based on box-shadow property: This is the hidden content, please Sign In or Sign Up This is the hidden content, please Sign In or Sign Up This is the hidden content, please Sign In or Sign Up Link to comment Share on other sites More sharing options...
subw0r Posted December 18, 2012 Share Posted December 18, 2012 Re: Stylish CSS3 progress bars Gracias!! muy claro y que bien quedan xDD Link to comment Share on other sites More sharing options...
Recommended Posts