Instructions
Creating Loading Bars With Ajax
1Download a loading bar gif from the Ajax gif generator (see Resources). Choose a style from the "Indicator type" drop-down menu then click "Generate." Click "Download It!" below the preview. A download dialog will appear. Browse to the directory of your loading -bar project, name the file "loading.gif" and then press "Enter." Alternatively, if you are a graphics editor, you can build your own progress bar. Make sure it is an animation with the "gif" file extension.
2
Download the jQuery library (see Resources). A JavaScript code file will open. Click "File," "Save." When the Save dialog box appears, browse to the directory of your loading-bar project and press "Enter."
3
Launch a code editor or Notepad. For Notepad, click "Start," "All Programs," "Accessories," "Notepad."
4
Copy and paste the following code to the blank file:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(window).load(function(){
$("#loading").hide(); })
</script>
<style="text/css">
loading { 5
Save the file. Click "File," "Save," give it a name with the "html" extension (such as "loadbar.html") and press "Enter."
Creating Loading Bars With Flash
1Launch any Flash editor.
2
Create three new frames with by clicking "Insert," "Frame."
3
In the "Frames" panel (usually on the left of the Flash editor), right click the top frame and select "Rename." Name it "actions." Use the same process to name the second frame "siteloader," the third frame "outline" and the last frame "bar."
4
Lock the "actions" and "outline" frames. Right click each of the frame names and select "Lock."
5
Set the "fill" and "stroke" colors. The "fill" color is the one next to the dump bucket. The "stroke" color is the color next to the pencil. Make sure that the colors contrast each other so that the stroke will be clearly visible over the background.
6
Create a rectangle for the loading bar. Click the rectangle tool in the tool box, set the border to the desired width and draw a rectangle on the "bar" frame. This rectangle will act as your loading bar. The "fill" color will fill the loading bar as the download progresses.
7
Move the outline from the "bar" layer to the "outline" layer. Double click the outline of the load bar to select the outline only. Press "Ctrl" and "x" simultaneously to cut the outline from the load bar. Right click the word "bar" and select "Lock." Right click "outline" and select "Unlock." Click "Edit," "Paste in Place."
8
Make the loading bar a movie clip. Right click "outline" and select "Lock." Right click "bar" and select "Unlock." Click the rectangle, then "Modify," "Convert to Symbol." Type "loadbar" as the name then click the radio button for "Movie clip" and press "Enter."
9
Create an ActionScript instance. Click "Properties." In the text box next to "Name" type "loadingBar."
10
Set up the site loader. Lock the "bar" layer and unlock the "siteloader" layer. Click "Insert," "New Symbol," name it "site," select "Movie clip" and press "Enter." Click "Window," "Library." Click "site" and drag it to the stage (the main panel of the Flash editor). Click "Properties." In the text box by "Name" type "siteLoader."
11
Program the ActionScript. Click "Window," "Actions." A code editor will appear on the screen. Copy and paste the following code to the code editor:
siteLoader.loadMovie("<WHAT'S BEING LOADED>");
loadingBar._xscale = 1;
loadingBar.onEnterFrame = function() {
kBytesLoaded = this._parent.siteLoader.getBytesLoaded() / 1024;
kBytesTotal = this._parent.siteLoader.getBytesTotal() / 1024;
percentage = Math.round(kBytesLoaded / kBytesTotal * 100);
this._xscale = percentage;
if (percentage == 99) {
delete this.onEnterFrame;
}
}
Replace "<WHAT'S BEING LOADED>" with the path of the file or web page that is being loaded while the loading bar progresses.
12
Save the project as "loadbar.swf."