new ng.ProgressBar (Object options) vs. 1.2.2 Full+Lite

A progress bar is a graphical control element used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation. Sometimes, the graphic is accompanied by a textual representation of the progress in a percent format.

Parameters

Object options vs. 1.2.2 Full+Lite
An optional object to hold the Accordion properties. The ng.ProgressBar class inherits the ng.PlugIn.options and all it's properties.

Examples

Basic ProgressBar
This example will show a few basic progress bars.
Demo:


100



100
Overlapping Elements
In this example, we'll show to how to overlap a progress bar over an element.
Demo:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body ProgressBar
In this example, we'll show how to show the progress bar over the entire document.
Demo:

Inheritance Tree

This class inherits the following classes and all their methods and properties. It's recommended to check if any private properties/options are defined before using them. The complete list of inheritted methods and events are listed below the current object Custom Events.
ng.Events ()
ng.PlugIn (options)
ng.ProgressBar (options)

Methods

Function ng.ProgressBar.make (parent, position) vs. 1.2.2 Full+Lite
This function will build a ProgressBar inside the parent HTML Element.
Function ng.ProgressBar.hide () vs. 1.2.2 Full+Lite
Hides the progress bar. This method fires the event onHide.
Function ng.ProgressBar.show () vs. 1.2.2 Full+Lite
Shows the progress bar. This method fires the onShow event.
Function ng.ProgressBar.is_hidden () vs. 1.2.2 Full+Lite
Checks if the progress bar is hidden or not.
Function ng.ProgressBar.overlap (elm) vs. 1.2.2 Full+Lite
Overlaps the progress bar over an HTML Element.
Function ng.ProgressBar.resize () vs. 1.2.2 Full+Lite
Resizes the progress bar. This method is called automatically when the window is resized and will fire the onResize event.
Function ng.ProgressBar.set_value (value) vs. 1.2.2 Full+Lite
Sets the progress bar value. This method will call the ng.ProgressBar.resize and fire the onChange event.
Function ng.ProgressBar.get_value () vs. 1.2.2 Full+Lite
Gets the current progress bar value.
Function ng.ProgressBar.set_indeterminate_text (txt) vs. 1.2.2 Full+Lite
Sets the indeterminate text property.
Function ng.ProgressBar.get_indeterminate_text () vs. 1.2.2 Full+Lite
Gets the indeterminate text property.
Function ng.ProgressBar.set_complete_text (txt) vs. 1.2.2 Full+Lite
Sets the complete text property.
Function ng.ProgressBar.get_complete_text () vs. 1.2.2 Full+Lite
Gets the complete text property.
Function ng.ProgressBar.set_complete_class (classname) vs. 1.2.2 Full+Lite
Sets a special CSS class name to add to the progress bar when it reaches 100%.
Function ng.ProgressBar.get_complete_class () vs. 1.2.2 Full+Lite
Gets the complete class name.
Function ng.ProgressBar.set_hide_text (hide) vs. 1.2.2 Full+Lite
Hides or shows the progress bar text.
Function ng.ProgressBar.get_hide_text () vs. 1.2.2 Full+Lite
Gets the hide text property.
Function ng.ProgressBar.set_color (bg, txt) vs. 1.2.2 Full+Lite
Sets the active parts background and text colors.
Function ng.ProgressBar.set_bg_color (clr) vs. 1.2.2 Full+Lite
Set the active part of the progress bar background color.
Function ng.ProgressBar.get_bg_color () vs. 1.2.2 Full+Lite
Gets the progress bar active part background color.
Function ng.ProgressBar.set_text_color (clr) vs. 1.2.2 Full+Lite
Sets the progress bar active parts text color.
Function ng.ProgressBar.get_text_color () vs. 1.2.2 Full+Lite
Gets the active parts text color.
Function ng.ProgressBar.set_body_overlay (overlay) vs. 1.2.2 Full+Lite
Shows an overlay over the body when the progress is visible or not.
Function ng.ProgressBar.get_body_overlay () vs. 1.2.2 Full+Lite
Gets the body overlay property.

Custom Events

In the events' functions, the this will refer to the class object.
Event onHide vs. 1.2.2 Full+Lite
Fires when the progress bar is hidden.
Event onShow vs. 1.2.2 Full+Lite
Fires when the progress bar is shown.
Event onResize vs. 1.2.2 Full+Lite
Fires when the progress bar is resized either via the browser window or value update.
Event onChang vs. 1.2.2 Full+Lite
Fires when the progress bar value is changed.

ng.Events () Methods

Some of these methods might be overriden by the inheriting class.
Function ng.Events.add_event (evt, func) vs. 1.1.0 Full+Lite
The add_event method will attach an event listener to an object. When the event is fired, the listeners functions will be executed on last added first run approach.
Function ng.Events.add_events (obj) vs. 1.1.0 Full+Lite
This method works the same way as Events.add_event(evt, func) except it takes an object with a list of events and functions.
Function ng.Events.remove_event (evt, func) vs. 1.1.0 Full+Lite
Remove the function func from the event evt queue. When adding the event, you should add the function by reference. Anonymous functions cannot be removed.
Function ng.Events.remove_events (obj) vs. 1.1.0 Full+Lite
This method works the same way as Events.remove_event(evt, func) except it takes an object with a list of events and functions.
Function ng.Events.clear_events (evt) vs. 1.1.0 Full+Lite
Remove all the functions under the event name evt.
Function ng.Events.clear_all_events () vs. 1.1.0 Full+Lite
This function works the same way Events.clear_events(evt) except it removes all the events attached to the object.
Function ng.Events.fire_event (evt_nm, args, evt) vs. 1.1.0 Full+Lite
Executes all the functions in the event evt_nm queue. Functions are executed in lasted added first exectued order.

ng.PlugIn (options) Methods

Some of these methods might be overriden by the inheriting class.
Function ng.PlugIn.get_position () vs. 1.1.0 Full+Lite
Get the plugin holding object position.
Function ng.PlugIn.get_width () vs. 1.1.0 Full+Lite
Get the ng.PlugIn holding object width.
Function ng.PlugIn.get_heigh () vs. 1.1.0 Full+Lite
Get the ng.PlugIn holding object height.
Function ng.PlugIn.set_object (obj) vs. 1.1.0 Full+Lite
Sets the ng.PlugIn holding HTML Element. The HTML Element should hold all the output and handles any events.
Function ng.PlugIn.get_object () vs. 1.1.0 Full+Lite
Gets the HTML Elements that holds the ng.PlugIn output.
Function ng.PlugIn.make_id (txt) vs. 1.1.0 Full+Lite
Creates a unique id for the ng.PlugIn object.
Function ng.PlugIn.get_id () vs. 1.1.0 Full+Lite
Get's the plugin ID.
Function ng.PlugIn.set_language (lang) vs. 1.1.0 Full+Lite
Sets the plugin language and reset the HTML Element direction based on the language.
Function ng.PlugIn.get_language () vs. 1.1.0 Full+Lite
Gets the plugin language.
Function ng.PlugIn.remove () vs. 1.1.0 Full+Lite
Removes the plugin and all it's properties. This method will also remove any HTML Elements that are associated with the plugin.
Function ng.PlugIn.create_options (options, default) vs. 1.1.2 Full+Lite
Create the initial options for the plugin. This method doesn not alter the plugin variables, but return an object that can be assigned to a variable in the plugin.
Function ng.PlugIn.create_events () vs. 1.1.2 Full+Lite
Create the plugin events from the customized option. This method should be called after ng.PlugIn.create_options.
Function ng.PlugIn.get (prop) vs. 1.2.2 Full+Lite
Gets the plugin property. This method will check if there is a getter function for the plugin and return it's value, otherwise it'll return the raw property. This method is useful for getting custom properties.
Function ng.PlugIn.set (prop, value) vs. 1.2.2 Full+Lite
Sets the plugin property. This method will check if there is a setter method for the plugin and call it. Otherwise, it will set the raw property value.This method is useful for setting custom properties.

ng.PlugIn (options) Custom Events

In the events' functions, the this will refer to the class object.
Event onBeforeRemove vs. 1.2.2 Full+Lite
This event will fire right before the plugin (or any object that inherit it, e.g. components) is removed.