Neon | Load Progress

- John Henderson

- 6
- 10
- 1

- Language:
- Chat 0
- Log Out

## Page Loading Bar

Example, Live Preview | Usage Directions
--- | ---

Load to 100%

Will show progress bar in the header that will load to 100% and will automatically be hidden. Delay for this animation is 1.3 seconds.
Sample code:

    show_loading_bar(100);

Load to 65%

Will fill the progress bar to 65% and will stop.
Sample code:

    show_loading_bar(65);

Load to 20%

Regression sample, will work if you have already loaded progress to 65% in this case.
Sample code:

    show_loading_bar(20);

Callback Test (Finish)

An example how you can trigger specific function after the progress bar reaches the end of given percentage.
Sample code:

    show_loading_bar({
    			pct: 78,
    			finish: function(pct)
    			{
    				alert("Progress stopped to: " + pct + '%');
    				hide_loading_bar();
    			}
    		});

Callback Test (Before)

An example how you can trigger specific function before the progress bar starts loading. You can also apply both callbacks on finish and before.
Sample code:

    show_loading_bar({
    			pct: 78,
    			delay: 5,
    			before: function(pct)
    			{
    				alert("Progress bar initialized");
    			}
    		});

More Advanced Example

Partial loading of the progress bar, this will create several animation instances and can be used in case if you request more than one HTTP request. See the example below.
Sample code:

    show_loading_bar({
    			pct: 78,
    			delay: 1.2,
    			finish: function(pct)
    			{
    				show_loading_bar({
    					pct: 30,
    					delay: 1.7,
    					wait: .5,
    					finish: function()
    					{
    						show_loading_bar({
    							wait: .5,
    							pct: 100
    						})
    					}
    				});
    			}
    		});

## API Functions

Function Name | Description and Usage Details
--- | ---

#### show_loading_bar(options|percentage)

This function will show the progress bar in the upper part of window, and can be called in two ways:
1. Percentage - Simply fills the progress bar but do not do any action:

    show_loading_bar(100);

2. Options - Its more flexible than the percentage, because here you can adjust delay, wait time, percentage and assign events (before and finish).
Example:

    show_loading_bar({
    			pct: 100, // number from 0-100,
    			delay: 1.3, // seconds to fully load the percentage (seconds unit)
    			wait: 0, // before starting loading will wait for specified seconds (seconds unit)
    			before: function(pct){ ... }, // Before starting to fill the progress, this function will be called,
    			finish: function(pct){ ... }, // After the progress bar finishes loading the specified percentage,
    			resetOnEnd: true // Will set the percentage to 0 and will be hidden after the progress bar hits 100%
    		});

#### hide_loading_bar()

Simply hides the progress bar even if it is currently in progress.

## Chat 0

Favorites Catherine J. Watkins Nicholas R. Walker Susan J. Best Brandon S. Young Fernando G. Olson
Work Robert J. Garcia Daniel A. Pena Rodrigo E. Lozano
Social Velma G. Pearson Margaret R. Dedmon Kathleen M. Canales Tracy J. Rodriguez

- Art Ramadani

  Are you here?

  09:00
- Catherine J. Watkins

  This message is pre-queued.

  09:25
- Catherine J. Watkins

  Whohoo!

  09:26
- Catherine J. Watkins

  Do you like it?

  09:27

- Daniel A. Pena

  I am going out.

  08:21
- Daniel A. Pena

  Call me when you see this message.

  08:27