ejProgressBar

11 Jul 201811 minutes to read

The ProgressBar control is a graphical control element used to visualize the changing status of an extended operation.

Syntax

  • JAVASCRIPT
    • $(element).ejProgressBar()

    Example

  • HTML
    • <div id="progress"></div>
<script>
$("#progress").ejProgressBar({value: 50});
</script>

    Requires

    • module:jQuery

    • module:jquery.easing.1.3.js

    • module:ej.core.js

    • module:ej.progressbar.js

    Members

    cssClass string

    Sets the root CSS class for ProgressBar theme, which is used customize.

    Default Value

    • null

    Example

  • HTML
    • <div id="progress"></div>
<script>
//Initialize the ProgressBar with the cssClass value specified
$("#progress").ejProgressBar({ cssClass: 'gradient-lime ',value: 50  });
</script>

    enabled boolean

    When this property sets to false, it disables the ProgressBar control

    Default Value

    • true

    Example

  • HTML
    • <div id="progress"></div>
<script>
//Initialize the ProgressBar with the enabled value specified
$("#progress").ejProgressBar({ enabled: true,value: 50 });
</script>

    enablePersistence boolean

    Save current model value to browser cookies for state maintains. While refresh the progressBar control page retains the model value apply from browser cookies

    Default Value

    • false

    Example

  • HTML
    • <div id="progress"></div>
<script>
//Initialize the Progress bar with the persist value specified
$("#progress").ejProgressBar({ enablePersistence: true,value: 50 });
</script>

    enableRTL boolean

    Sets the ProgressBar direction as right to left alignment.

    Default Value

    • false

    Example

  • HTML
    • <div id="progress"></div>
<script>
//Initialize the Progress bar with the rtl value specified
$("#progress").ejProgressBar({ enableRTL: true,value: 50 });
</script>

    height number|string

    Defines the height of the ProgressBar.

    Default Value

    • null

    Example

  • HTML
    • <div id="progress"></div>
<script>
//Initialize the ProgressBar with the height value specified
$("#progress").ejProgressBar({ height: 20,value: 50 });
</script>

    htmlAttributes object

    It allows to define the characteristics of the progressBar control. It will helps to extend the capability of an HTML element.

    Default Value

    • {}

    Example

  • HTML
    • <div id="progress"></div>
<script>
//Initialize the ProgressBar with htmlAttributes specified
$("#progress").ejProgressBar({ htmlAttributes: { title: "Demo" } });
</script>

    maxValue number

    Sets the maximum value of the ProgressBar.

    Default Value

    • 100

    Example

  • HTML
    • <div id="progress"></div>
<script>
//Initialize the ProgressBar with the max value specified
$("#progress").ejProgressBar({ maxValue: 200 ,value: 200 });
</script>

    minValue number

    Sets the minimum value of the ProgressBar.

    Default Value

    • 0

    Example

  • HTML
    • <div id="progress"></div>
<script>
//Initialize the ProgressBar with the min value specified
$("#progress").ejProgressBar({ minValue: 50,value: 50});
</script>

    percentage number

    Sets the ProgressBar value in percentage. The value should be in between 0 to 100.

    Default Value

    • 0

    Example

  • HTML
    • <div id="progress"></div>
<script>
//Initialize the ProgressBar with the progress value specified in percent
$("#progress").ejProgressBar({ percentage : 35 });
</script>

    showRoundedCorner boolean

    Displays rounded corner borders on the progressBar control.

    Default Value

    • false

    Example

  • HTML
    • <div id="progress"></div>
<script>
//Initialize the ProgressBar with the rounded corner support.
$("#progress").ejProgressBar({ showRoundedCorner: true });
</script>

    text string

    Sets the custom text for the ProgressBar. The text placed in the middle of the ProgressBar and it can be customizable using the class ‘e-progress-text’.

    Default Value

    • null

    Example

  • HTML
    • <div id="progress"></div>
<script> 
//To set the text API value during initialization  
$("#progress").ejProgressBar({ text: 'loading...',value: 50 });
</script>

    value number

    Sets the ProgressBar value. The value should be in between min and max values.

    Default Value

    • 0

    Example

  • HTML
    • <div id="progress"></div>
<script>
//Initialize the ProgressBar with the progress value specified
$("#progress").ejProgressBar({ value: 70 });
</script>

    width number|string

    Defines the width of the ProgressBar.

    Default Value

    • null

    Example

  • HTML
    • <div id="progress"></div>
<script>
//Initialize the ProgressBar with the width value specified
$("#progress").ejProgressBar({ width: 200,value: 50});
</script>

    Methods

    destroy()

    Destroy the progressbar widget

    Example

  • HTML
    • <div id="progress"></div>
<script>
$("#progress").ejProgressBar({value: 50});
// Create Progressbar instance
var proObj = $("#progress").data("ejProgressBar");
proObj.destroy(); //destroy the Progressbar control
</script>
  • HTML
    • <div id="progress"></div>
<script>
$("#progress").ejProgressBar({value: 50});
        // To destroy the Progressbar control
$("#progress").ejProgressBar("destroy");
</script>

    disable()

    Disables the progressbar control

    Example

  • HTML
    • <div id="progress"></div>
<script>
$("#progress").ejProgressBar({value: 50});
// Create Progressbar instance
var proObj = $("#progress").data("ejProgressBar");
proObj.disable(); //disables the Progressbar control
</script>
  • HTML
    • <div id="progress"></div>
<script>
$("#progress").ejProgressBar({value: 50});
        //To disables the Progressbar control
$("#progress").ejProgressBar("disable");
</script>

    enable()

    Enables the progressbar control

    Example

  • HTML
    • <div id="progress"></div>
<script>
$("#progress").ejProgressBar({value: 50});
// Create Progressbar instance
var proObj = $("#progress").data("ejProgressBar");
proObj.enable(); // enables the Progressbar control
</script>
  • HTML
    • <div id="progress"></div>
<script>
$("#progress").ejProgressBar({value: 50});
        // To enables the Progressbar control
$("#progress").ejProgressBar("enable");
</script>

    getPercentage()

    Returns the current progress value in percent.

    Returns:

    number

    Example

  • HTML
    • <div id="progress"></div>
<script>
$("#progress").ejProgressBar({value: 50});
// Create Progressbar instance
var proObj = $("#progress").data("ejProgressBar");
proObj.getPercentage(); // get the percent of Progressbar control
</script>
  • HTML
    • <div id="progress"></div>
<script>
$("#progress").ejProgressBar({value: 50});
        // To get the percent of Progressbar control
$("#progress").ejProgressBar("getPercentage");
</script>

    getValue()

    Returns the current progress value

    Returns:

    number

    Example

  • HTML
    • <div id="progress"></div>
<script>
$("#progress").ejProgressBar({value: 50});
// Create Progressbar instance
var proObj = $("#progress").data("ejProgressBar");
proObj.getValue(); // get the value of Progressbar control
</script>
  • HTML
    • <div id="progress"></div>
<script>
$("#progress").ejProgressBar({value: 50});
        // To get the value of Progressbar control 
$("#progress").ejProgressBar("getValue");
</script>

    Events

    change

    Event triggers when the progress value changed

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the ProgressBar model
    percentage object returns the current progress percentage
    type string returns the name of the event
    value string returns the current progress value

    Example

  • HTML
    • <div id="progress"></div>
<script>
//initial complete event
$("#progress").ejProgressBar({
        value: 50,
        change: function(args) {}
});
</script>

    complete

    Event triggers when the process completes (at 100%)

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the ProgressBar model
    percentage object returns the current progress percentage
    type string returns the name of the event
    value string returns the current progress value

    Example

  • HTML
    • <div id="progress"></div>
<script>
//initial complete event
$("#progress").ejProgressBar({
        value: 50,
        complete: function(args) {}
});
</script>

    create

    Event triggers when the progressbar are created

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the progressbar model
    type string returns the name of the event

    Example

  • HTML
    • <div id="progress"></div> 
 
<script>
//create event for progressbar
$("#progress").ejProgressBar({
        value: 50,
        create: function(args) {}
});
</script>

    destroy

    Event triggers when the progressbar are destroyed

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the progressbar model
    type string returns the name of the event

    Example

  • HTML
    • <div id="progress"></div> 
 
<script>
//destroy event for progressbar
$("#progress").ejProgressBar({
        value: 50,
        destroy: function(args) {}
});
</script>

    start

    Event triggers when the process starts (from 0%)

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the ProgressBar model
    percentage object returns the current progress percentage
    type string returns the name of the event
    value string returns the current progress value

    Example

  • HTML
    • <div id="progress"></div>
<script>
//initial start event
$("#progress").ejProgressBar({
        value: 50,
        start: function(args) {}
});
</script>