| 

.NET C# Java Javascript Exception

3
Hi,

besucht man seinen Googlemail account, gibt es eine Loading-Bar. Ich finde dieses Konzept interessant. ;) Und imho handelt es sich auch nicht um eine SpielUhr, wie es z.B. beim Vista Bootscreen der Fall ist. Kennt jemand etwas vergleichbares in JQuery?

Grüße
News:
19.10.2009
Arade 225 1 5
2 Antworten
7
Step 1: Building the simple and clean xhtml layout

As always, We begin the process making the layout to add the javascript magic at the end (in this example we won’t need jQuery library). We will horizontal & vertical align our loading bar with a little text showing us wich js file is being load in each moment:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>yensdesign.com - How to create a stylish loading bar as Gmail in jQuery</title>
<link rel="stylesheet" href="general.css" type="text/css" media="screen" />
<script src="js/loading.js" type="text/javascript"></script>
</head>
<body onload="start()">
<div id="restart">
<a href="http://www.yensdesign.com/"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
<div id="button" onclick="restart()"><input type="submit" value="Restart me please!" /></div>
</div>
<div id="loadingZone">
<div id="loadingSms">LOADING</div>
<div id="infoProgress">0%</div>
<br class="clear" />
<div id="loadingBar">
<div id="progressBar">&amp;amp;amp;nbsp;</div>
</div>
<div id="infoLoading"></div>
</div>
</body>
</html>


Allright guys, so we have 2 main divisions: restart & loadingZone. We will hide at the begining the restart division and show the loadingZone, updating it while the external javascript files are loading in the process.

Note: the “ ” in the progressBar makes visible the division.
Step 2: Adding some style to our loading bar

This point is very interesting in this tut, We will learn how to make up a loading bar contained in another parent division, showing the loading process. Here comes the tip:

The division called loadingBar with a fixed width will contains the progressBar that show the status of the loading process by increasing his width % from 0% to 100%.

As always we make it easy and try to do cross browsing examples adding some tricks to IE 6 like the “overflow: hidden” to the progress bar.

So here we have the css code:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background:#fff none repeat scroll 0%;
font-size: 12px;
font-family:tahoma,arial,sans-serif;
margin:0pt;
height:100%;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
a{
cursor: pointer;
text-decoration:none;
}
.clear{
clear:both;
}
#button{
text-align:center;
margin:50px 50px 150px 50px;
}
#restart{
display:none;
text-align:center;
}
#loadingZone{
margin:0 auto;
width:410px;
text-align:center;
}
#loadingBar{
border:1px solid #c2c2c2;
height:2px;
text-align:left;
line-height:0;
margin:0;
padding:0;
overflow:hidden; /*fix for IE 6*/
}
#progressBar{
height:2px;
line-height:0;
margin:0;
padding:0;
background:#b3f83d;
width:0%;
}
#loadingSms{
color:#6ea1fa;
float:left;
padding:10px 2px;
}
#infoProgress{
color:#6ea1fa;
float:right;
padding:10px 2px;
}
#infoLoading{
padding:10px;
color:#b9b9b9;
font-size:10px;
}


As you can see we have a little more info about the loading process by adding some text division to show the % (infoProgress) and the current loading file (infoLoading).
Step 3: Here comes the javascript magic one more time

Last step and the most important on this example, we will do a lot of things with generic javascript, because we don’t need to load all jQuery library to load some external js in cache, right? Checkout this list:

* Vertical & horizontal align loading bar
* Load external javascript files as gmail does

For vertical & horizontal align the loading bar We can reuse our code to center popup that we learned in the old tutorial How to create a stunning and smooth popup using jQuery tutorial.

So create a javascript file called “loading.js” for example. We will create the loading bar class to manage all the loading process by using some methods that we will create for it:


var LoadBar = function(){
this.value = 0;
this.sources = Array();
this.sourcesDB = Array();
this.totalFiles = 0;
this.loadedFiles = 0;
};


So now let’s add the methods to the LoadBar class:

//Show the loading bar interface
LoadBar.prototype.show = function() {
this.locate();
document.getElementById("loadingZone").style.display = "block";
};
//Hide the loading bar interface
LoadBar.prototype.hide = function() {
document.getElementById("loadingZone").style.display = "none";
};
//Add all scripts to the DOM
LoadBar.prototype.run = function(){
this.show();
var i;
for (i=0; i<this.sourcesDB.length; i++){
var source = this.sourcesDB[i];
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "js/" + source
head.appendChild(script);
}
};
//Center in the screen remember it from old tutorials?
LoadBar.prototype.locate = function(){
var loadingZone = document.getElementById("loadingZone");
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = loadingZone.clientHeight;
var popupWidth = loadingZone.clientWidth;
loadingZone.style.position = "absolute";
loadingZone.style.top = parseInt(windowHeight/2-popupHeight/2) + "px";
loadingZone.style.left = parseInt(windowWidth/2-popupWidth/2) + "px";
};
//Set the value position of the bar (Only 0-100 values are allowed)
LoadBar.prototype.setValue = function(value){
if(value >= 0 && value <= 100){
document.getElementById("progressBar").style.width = value + "%";
document.getElementById("infoProgress").innerHTML = parseInt(value) + "%";
}
};
//Set the bottom text value
LoadBar.prototype.setAction = function(action){
document.getElementById("infoLoading").innerHTML = action;
};
//Add the specified script to the list
LoadBar.prototype.addScript = function(source){
this.totalFiles++;
this.sources[source] = source;
this.sourcesDB.push(source);
};
//Called when a script is loaded. Increment the progress value and check if all files are loaded
LoadBar.prototype.loaded = function(file) {
this.loadedFiles++;
delete this.sources[file];
var pc = (this.loadedFiles * 100) / this.totalFiles;
this.setValue(pc);
this.setAction(file + " loaded");
//Are all files loaded?
if(this.loadedFiles == this.totalFiles){
setTimeout("myBar.hide()",300);
//load the reset button to try one more time!
document.getElementById("restart").style.display = "block";
}
};

So complex? Nah, calm down and read it one more time carefully, it’s very easy (as always do over here man!) and it will be awasome for our web applications :)

And to finish our code, We will control by using 2 functions: start() and restart() the begin & end of the process. We will add too a little improvement to the centering function.



//Called on body load
start = function(){
myBar.addScript("jsfile2.js");
myBar.addScript("jsfile3.js");
myBar.addScript("jsfile4.js");
myBar.addScript("jsfile1.js");
myBar.addScript("jsfile5.js");
myBar.addScript("jsfile6.js");
myBar.addScript("jsfile7.js");
myBar.addScript("jsfile8.js");
myBar.run();
};
//Called on click reset button
restart = function(){
window.location.reload();
};


It’s usefull to use onresize javascript event to reconfigure your layout values when the user resizes his window’s browser.

And that’s all guys, now we will create some js files to test our example and to notify to the myBar instance class of LoadBar that some js files were loaded:
setTimeout("myBar.loaded('jsfile7.js')", 500);



myBar.loaded IT’S VERY IMPORTANT it warns to our class LoadBar that the “jsfile7.js” is complete loaded. The second value (in this example 500) is the miliseconds to simulate the waiting for loading an external js file, to let us to test our loading bar.

Finally, thats all :P
Step 4:Trying our stylish loading bar!

And that’s all guys, I hope this tutorial helps you. You can try the tutorial online here to see how It is working and download here all sources.


Quelle: http://yensdesign.com/2008/11/how-to-create-a-stylish-loading-bar-as-gmail-in-javascript/


Ergebnis (Beispiel-Screenshot):



Edit Floyd:

  • Korrektur BB-Code
  • Quelle als Link
  • Beispiel-Screenshot hinzugefügt

Edit Martin Bassus.

  • Clipboardhinweis entfernt
19.10.2009
Martin Bassus 486 1 8
1
Danke@Floyd :)
Martin Bassus 19.10.2009
1
Np, hätte fast auch die positive Bewertung des Beitrags vergessen. Hoffentlich können die, die deine Antwort lesen auch Englisch ;)
Floyd 19.10.2009
1
Ich hoffe auch - ich will ja helfen, aber die Zeit zum übersetzen fehlt mir leider *g* Aber die meisten Entwickler können ja glücklicherweise zwangsweise das nötige Programmierer-Englisch ;-)
Martin Bassus 19.10.2009
Thank you! ;)
Arade 20.10.2009
0
Acting on this we can now have the hack clash royale to get the gems and gold for the game that we play a lot . Supercell has gifted a gems from their show here.
16.07.2017

Stelle deine Javascript-Frage jetzt!