Numerical representation!
But why? I hear you wail. Well, some people just
So make the following changes to your code - CSS, JavaScript, HTML.
<!DOCTYPE html>
<html>
<head>
<title>Progress Loader test</title>
<style type="text/css">
.loader_box
{
width: 500px;
height: 20px;
border: 1px solid #777777;
border-radius: 9px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.loader_content
{
width: 500px;
height: 20px;
background: #ff4444; /* Old browsers */
background: -moz-linear-gradient(top, #ff4444 0%, #ff9e9e 52%, #ff4444 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff4444), color-stop(52%,#ff9e9e), color-stop(100%,#ff4444)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* IE10+ */
background: linear-gradient(to bottom, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff4444', endColorstr='#ff4444',GradientType=0 ); /* IE6-9 */
}
.loader_wrapper
{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
position: fixed;
z-index: 600;
top: 0px;
left: 0px;
padding-top: 50px;
display: none;
}
.loader_text
{
width: 500px;
height: 20px;
text-align: center;
font-size: 14px;
font-family: arial;
color: #FFFFFF;
margin-left: auto;
margin-right: auto;
}
</style>
<script>
var loader;
dots=". ";
function start_loader(varloader)
{
document.getElementById(varloader+"_wrapper").style.dislay="block";
loader=setInterval(function () {process_loader(varloader+"_content")}, 500);
if (dots==". ")
{
dots=".. ";
}
else if (dots==".. ")
{
dots="...";
}
else if (dots=="...")
{
dots=". ";
}
function process_loader(varloadercontent)
{
var inc=1;
var marginleft = document.getElementById(varloadercontent).style.marginLeft;
marginleft=marginleft.replace("px","");
marginleft=parseInt(marginleft)+inc;
if (marginleft>=0)
{
document.getElementById(varloadercontent).style.marginLeft="-5px";
document.getElementById(varloadercontent+"_text").innerHTML="Loading 95%"+dots;
}
else
{
var percent=(((500+marginleft)/500)*100).toFixed(0);
document.getElementById(varloadercontent+"_text").innerHTML="Loading "+percent+"%"+dots;
document.getElementById(varloadercontent).style.marginLeft=marginleft+"px";
}
}
}
function stop_loader(varloader)
{
clearInterval(loader);
document.getElementById(varloader+"_wrapper").style.dislay="none";
}
</script>
</head>
<body>
<div id="loader_wrapper" class="loader_wrapper">
<div id="loader" class="loader_box">
<div id="loader_content" class="loader_content" style="margin-left:-500px;">
</div>
</div>
<br />
<div id="loader_content_text" class="loader_text">
</div>
</div>
<script>
start_loader("loader");
</script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<script>
//stop_loader("loader"); COMMENT THIS CODE OUT SO YOU CAN SEE WHAT'S HAPPENING.
</script>
</body>
</html>
<html>
<head>
<title>Progress Loader test</title>
<style type="text/css">
.loader_box
{
width: 500px;
height: 20px;
border: 1px solid #777777;
border-radius: 9px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.loader_content
{
width: 500px;
height: 20px;
background: #ff4444; /* Old browsers */
background: -moz-linear-gradient(top, #ff4444 0%, #ff9e9e 52%, #ff4444 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff4444), color-stop(52%,#ff9e9e), color-stop(100%,#ff4444)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* IE10+ */
background: linear-gradient(to bottom, #ff4444 0%,#ff9e9e 52%,#ff4444 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff4444', endColorstr='#ff4444',GradientType=0 ); /* IE6-9 */
}
.loader_wrapper
{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
position: fixed;
z-index: 600;
top: 0px;
left: 0px;
padding-top: 50px;
display: none;
}
.loader_text
{
width: 500px;
height: 20px;
text-align: center;
font-size: 14px;
font-family: arial;
color: #FFFFFF;
margin-left: auto;
margin-right: auto;
}
</style>
<script>
var loader;
dots=". ";
function start_loader(varloader)
{
document.getElementById(varloader+"_wrapper").style.dislay="block";
loader=setInterval(function () {process_loader(varloader+"_content")}, 500);
if (dots==". ")
{
dots=".. ";
}
else if (dots==".. ")
{
dots="...";
}
else if (dots=="...")
{
dots=". ";
}
function process_loader(varloadercontent)
{
var inc=1;
var marginleft = document.getElementById(varloadercontent).style.marginLeft;
marginleft=marginleft.replace("px","");
marginleft=parseInt(marginleft)+inc;
if (marginleft>=0)
{
document.getElementById(varloadercontent).style.marginLeft="-5px";
document.getElementById(varloadercontent+"_text").innerHTML="Loading 95%"+dots;
}
else
{
var percent=(((500+marginleft)/500)*100).toFixed(0);
document.getElementById(varloadercontent+"_text").innerHTML="Loading "+percent+"%"+dots;
document.getElementById(varloadercontent).style.marginLeft=marginleft+"px";
}
}
}
function stop_loader(varloader)
{
clearInterval(loader);
document.getElementById(varloader+"_wrapper").style.dislay="none";
}
</script>
</head>
<body>
<div id="loader_wrapper" class="loader_wrapper">
<div id="loader" class="loader_box">
<div id="loader_content" class="loader_content" style="margin-left:-500px;">
</div>
</div>
<br />
<div id="loader_content_text" class="loader_text">
</div>
</div>
<script>
start_loader("loader");
</script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<script>
//stop_loader("loader"); COMMENT THIS CODE OUT SO YOU CAN SEE WHAT'S HAPPENING.
</script>
</body>
</html>
Now run the code. This is what you should be seeing...
What did I just do?
You added a placeholder with id loader_text just under the loader_box. But still within the loader_wrapper div. And then you styled it as follows...width: 500px - to match the width of loader_box.
height: 20px - well you may not really need this, but I'm a bit of a control freak.
text-align: center - because it would look weird otherwise.
font-size: 14px - what nice big font you have, grandma.
font-family: arial - because I fucking love arial. Shut up.
color: #FFFFFF - nice contrast to that black background.
margin-left: auto,margin-right: auto - centers it nicely within loader_wrapper.
And then you added a global variable dots to your JavaScript, and set an initial value of <dot><space><space>. Then a long-ass chained If-Else statement that masically changes the value of dots to the next applicable value. So as your text animation progresses and even when it stops moving because it's reached the end, the dots will keep animating. Clever, eh?
Next, you modified the If-Else statement in the process_loader() function to display a "Loading <percentage>%..." string which will change according to how far the loader_content div has moved from its original margin-left property of -500px!
I bet that was a lot to take in. Note that all of this is absolutely optional. So if you made it this far, give yourself a pat on the back... and roll those sleeves up because we've got more to do.
No comments:
Post a Comment