Creating an XP style progress bar in web page.
Author: DevASP
Download Source Code : 657_WinXPProgressbar.zip
This article is about how you can create an XP style progress bar in your web page. This progress bar is easily customizable.
This is a great looking pure DHTML progress bar that resembles the one seen in Window XP's startup screen. All visual aspects of the bar can be customized, and the script can be invoked multiple times to display multiple bars on the same page.Note that this application by default doesn't perform any action other than animating the progress bar. It's up to you to create helper functions to accomplish any relevant tasks.
Steps you will do.
Start visual studio and create a new web application.Add a new JavaScript file in your project from the project menu and add the following JavaScript code.
Explanation of function and customization:
To customize the look of the progress bar, simply pass in different values into createBar():
They are:
xyz - An arbitrary variable name to store the bar reference and must be unique. This variable will have a few different methods (explained later) which can be used to control some of each bar's behavior. This variable IS REQUIRED if you wish to use these methods. However, if you do not plan to use the methods, then the variable assignment is not necessary, but it won't hurt to use it anyway.
width- Total width of the entire bar in pixels.
height- Total height of the entire bar in pixels.
backgroundColor- Background color of the bar. Use valid CSS color or HEX color code value.
borderWidth- The width of the border around the bar, in pixels.
borderColor- The color of the border around the bar. Use valid CSS color or HEX color code value.
blockColor- The darkest color of the individual blocks. The color will progressively become more transparent. Use valid CSS color or HEX color code value.
scrollSpeed- The delay, in milliseconds, between each scroll step. Use smaller values for faster scroll speeds.
blockCount- The total number of blocks to use.
actionCount - The number of times the bar is to scroll before actionString is performed.
actionString - The javascript function, in string form, to execute once the bar has scrolled actionCount times. Set this to an empty string to do nothing. If doing nothing, you can use any number as actionCount.
Now open the HTML code of your web page and add the following JavaScript tag before closing the head tag to include the JavaScript file which you have created above.
Add the following HTML code in the form tag to design the layout of your web page and show the progress bars.
Progress bars with XP style having different colors. easily customizeable
Run your application as see the progress bar.
|