Javascript progress bar implementation code _ javascript skills

This example is tested. It is really based on the number of records. First, create two classes. One is used to connect with the data (data layer), and the other is used to associate the previous class with the page (logic layer)
Create a JScsrip. js File
The Code is as follows:

The Code is as follows:

Function setPgb (pgbID, pgbValue, pvalues)
{
If (pgbValue <= pvalues)
{
If (lblObj = document. getElementById (pgbID + '_ label '))
{
LblObj. innerHTML = Math. ceil (pgbValue/pvalues) * 100) + '%'; // change the label value
}
If (pgbObj = document. getElementById (pgbID ))
{
Var pChild = pgbObj. children [0];
PgbObj. children [0]. style. width = Math. ceil (pgbValue/pvalues) * 240); // pgbValue;
}
Window. status = "Data Reading number" + pgbValue + ", please wait ";
}
If (pgbValue = pvalues)
{
Window. status = "Data Reading completed ";
ProBar. style. display = "none ";
Table1.style. display = "none ";
}
}

Create a common.css
The Code is as follows:

The Code is as follows:

. Bi-loading-status
{
/** // * Position: absolute ;*/
Width: 250px;
Padding: 1px;
Overflow: hidden;
}
. Bi-loading-status. text {
White-space: nowrap;
Overflow: hidden;
Width: 100%;
Text-overflow: ellipsis;
Padding: 1px;
}
. Bi-loading-status. progress-bar {
Border: 1px solid ThreeDShadow;
Background: window;
Height: 10px;
Width: 100%;
Padding: 1px;
Overflow: hidden;
}
. Bi-loading-status. progress-bar p {
Background: Highlight;
Overflow: hidden;
Height: 100%;
Filter: Alpha (Opacity = 0, FinishOpacity = 100, Style = 1, StartX = 0, StartY = 0, FinishX = 100, FinishY = 0 );
}

Create a progressbar.htm
The Code is as follows:

The Code is as follows:

Create a Default. aspx File
The front-end code is as follows:

The Code is as follows: