jquery implementation file upload progress bar effect

Recently, the boss to make a progress bar effect out, this has not really done before. There's nothing left this week, just take this to fill the numbers.

File upload, you have to prepare a "button":

This looks pretty good, and the implementation is also very simple:

<span class= "Upload-span" > Start uploading Files </span>
<button> is too ugly, use span to do, controllability is strong. Add dot css:

. upload-span{
Display:inline-block;
width:120px;
height:40px;
Color: #FFFFFF;
Text-align:center;
line-height:40px;
Background-color:blue;
BORDER:2PX solid blue;
border-radius:5px;
Cursor:pointer;
letter-spacing:2px;
}
When clicked, the upload effect is triggered, then the event is added.
To be realistic, add a mask and a control that shows the progress bar, and when you click Span, the effect is probably this:

<div class= "Upload-mask" ></div>
<div class= "Upload-component" >
<div class= "Upload-close" >
<span class= "Upload-close-span" > Shutdown </span>
</div>
<div class= "Upload-content" >
<div class= "Progress" >
<span class= "Upload-text" ></span>
<span class= "uploaded" ></span>
</div>
<div class= "Confirm-cancel" >
<span class= "Confirm" > Confirmation </span>
<span class= "Cancel" > Cancel </span>
</div>
</div>
</div>
Add a little CSS up:

. upload-mask{
Position:absolute;
top:0;
left:0;
Z-index:9;
width:100%;
height:100%;
Background-color:rgba (84,84,84,0.3);
Display:none;
}
. upload-component{
Position:absolute;
z-index:99;
top:50%;
left:50%;
Margin-left: -120px;
Margin-top: -60px;
width:240px;
height:120px;
Background-color: #FFFFFF;
Display:none;
}
. upload-close{
position:relative;
height:30px;
Background-color:rgb (234,234,234);
}
. Upload-close span{
Position:absolute;
right:15px;
line-height:30px;
Cursor:pointer;
}
. upload-content,.confirm-cancel{
margin-top:15px;
}
. progress{
position:relative;
width:90%;
height:22px;
margin-left:4.88888%;
Text-align:center;
line-height:22px;
/*background-color:blue;*/
border:1px solid #ccc;
}
. upload-text{
Position:absolute;
z-index:99999;
color:red;
}
. uploaded{
Position:absolute;
left:0;
z-index:9999;
width:0%;
height:100%;
Background-color:blue;
Color: #FFFFFF;
}
. Confirm-cancel span{
Display:inline-block;
width:60px;
height:30px;
line-height:30px;
Text-align:center;
/*cursor:pointer;*/
Background-color: #ccc;
cursor:wait;
}
. confirm{
/*background-color:rgb (111,197,293);
margin-left:40%;
}
. cancel{
/*background-color:rgb (175,194,211);
margin-left:10px;
}
To simulate the progress of the display, here are two spans:

<div class= "Progress" >
<span class= "Upload-text" ></span>
<span class= "uploaded" ></span>
</div>
The above one is used to display percentages, the following one to fill the color:

. upload-text{
Position:absolute;
z-index:99999;
color:red;
}
. uploaded{
Position:absolute;
left:0;
z-index:9999;
width:0%;
height:100%;
Background-color:blue;
Color: #FFFFFF;
}
In order to be realistic, to fill the span set background color, its width is the percentage of progress, and finally use JS to simulate the progress of the changes:

Simulation Progress
function ProgressBar () {
var max = 100;
var init = 0;
var uploaded;
var test = setinterval (function () {
init + 10;
Uploaded = parseint ((Init/max * 100)) + '% ';
$uploadTextSpan. Text (uploaded). Next (). CSS ({
width:uploaded
});
if (init = = 100) {
Clearinterval (test);
$uploadTextSpan. Text (' upload complete ');
$ ('. Confirm-cancel span '). CSS ({
Cursor: ' pointer '
});
$ ('. Confirm '). CSS ({
BackgroundColor: ' RGB (111,197,293) '
});
$ ('. Cancel '). CSS ({
BackgroundColor: ' RGB (175,194,211) '
})
$closeConfirmCancel. On (' click ', Closeconfirmcancel);
}
else {
$closeConfirmCancel. Off (' click ', Closeconfirmcancel);
$ ('. Upload-close-span '). On (' click ', function () {
Clearinterval (test);
Closeconfirmcancel ();
});
$uploadMask. On (' click ', function () {
Clearinterval (test);
Closeconfirmcancel ();
})
}
},1000);
}