How to Create Loading Bars

Written by christopher hanson
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Create Loading Bars
Loading bars give users a graphic understanding of the progress of their downloads. (Download-Upload image by DAN from Fotolia.com)

Loading bars display the progress of a download or process. The loading bar gives users a visual understanding of how the progress is coming along. Each programming language has its own method for creating progress bars. The most popular choices are Flash and Ajax. Creating a loading bar requires a load-bar image which you can make yourself or download from an image generator. The loading bar requires code that informs it how much progress is being made.

Skill level:
Moderate

Other People Are Reading

Instructions

  1. 1

    Download 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 dialogue 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. 2

    Download the jQuery library (see Resources). A JavaScript code file will open. Click "File," "Save." When the Save dialogue box appears, browse to the directory of your loading-bar project and press "Enter."

  3. 3

    Launch a code editor or Notepad. For Notepad, click "Start," "All Programs," "Accessories," "Notepad."

  4. 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 {

    position:absolute;
    
    width:300px;
    
    top:0px;
    
    left:50%;
    
    margin-left:-150px;
    
    text-align:centre;
    
    padding:7px 0 0 0;
    
    font:bold 11px Arial, Helvetica, sans-serif;
    

    }

    </style>

    </head>

    <body>

    &lt;div id="loading"&gt;
    
        Download in progress, please wait..
    
        &lt;img src="loading.gif" alt="loading.." /&gt;
    
    &lt;/div&gt;
    

    </body>

    </html>

  5. 5

    Save the file. Click "File," "Save," give it a name with the "html" extension (such as "loadbar.html") and press "Enter."

  1. 1

    Launch any Flash editor.

  2. 2

    Create three new frames with by clicking "Insert," "Frame."

  3. 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. 4

    Lock the "actions" and "outline" frames. Right click each of the frame names and select "Lock."

  5. 5

    Set the "fill" and "stroke" colours. The "fill" colour is the one next to the dump bucket. The "stroke" colour is the colour next to the pencil. Make sure that the colours contrast each other so that the stroke will be clearly visible over the background.

  6. 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" colour will fill the loading bar as the download progresses.

  7. 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. 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. 9

    Create an ActionScript instance. Click "Properties." In the text box next to "Name" type "loadingBar."

  10. 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. 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. 12

    Save the project as "loadbar.swf."

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.