Introduction

AGlossBar is a CSS-only progress bar with a glossy appearance. The bars can be themed and customized to fit the user's needs without losing its core look and feel.

Files in this project

This project contains only 2 important files.

• aglossbar.css - This is the CSS file that contains the progress bar style classes and is required in order to use AGlossBar.
• aglossbar.html - This is a sample demo that shows how the bar must be used and what can be done with it.

Customization

Customization can be done by modifying the source of aglossbar.css. Depending on the user's needs, this may involve modifying some existing classes or adding new style classes. The file has sufficient comments within it for any user with basic knowledge of CSS. ####The following properties of AGlossBar may be customized:####

• Border radius (modify .aglossbar.border)
• Progress text font style (modify .aglossbar.text)
• Progress text font size (add classes for .aglossbar.text.fontsize)
• Progress text color (add classes for .aglossbar.text.colorname)
• Progress bar size (add classes for .aglossbar.size)
• Progress bar empty color (add classes for .aglossbar.outer.colorname)
• Progress bar fill color (add classes for .aglossbar.inner.colorname)

Compatible Browsers

AGlossBar has been tested on:

• Chrome 17.0
• Safari 5.1.2
• Firefox 10.0.2
• Opera 11.6

Contact

Feel free to send any feedback, issues or suggestions to: angelorohit[at]gmail[dot]com

###Enjoy!###