ejProgressBar

3 Aug 201821 minutes to read

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

Example

<ej-progressbar value="45" height="20" text="45%" ></ej-progressbar>

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

<ej-progressbar value="45" height="20" text="45%" cssClass="cssClass"></ej-progressbar>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

 
  constructor() {
  }
}

The css must be defined in stylesheet.

HTML

<style>
.cssClass{
    border: 10px solid grey;
}
</style>

enabled `boolean`

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

Default Value

true

Example

HTML

<ej-progressbar value="45" height="20" text="45%" [enabled]=true></ej-progressbar>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

 
  constructor() {
  }
}

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

<ej-progressbar value="45" height="20" text="45%" [enablePersistence]=true></ej-progressbar>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

 
  constructor() {
  }
}

enableRTL `boolean`

Sets the ProgressBar direction as right to left alignment.

Default Value

false

Example

HTML

<ej-progressbar value="45" height="20" text="45%" [enableRTL]=true></ej-progressbar>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

 
  constructor() {
  }
}

height `number|string`

Defines the height of the ProgressBar.

Default Value

null

Example

HTML

<ej-progressbar value="45" height="20" text="45%"></ej-progressbar>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

 
  constructor() {
  }
}

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

<ej-progressbar value="45" height="20" text="45%" [htmlAttributes]="html"></ej-progressbar>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

 html: any;
  constructor() {
      this.html={title: "Demo"};
  }
}

maxValue `number`

Sets the maximum value of the ProgressBar.

Default Value

Example

HTML

<ej-progressbar value="45" height="20" text="45%" [maxValue]="maxValue"></ej-progressbar>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

  maxValue: int;
  constructor() {
      this.maxValue=45;
  }
}

minValue `number`

Sets the minimum value of the ProgressBar.

Default Value

Example

HTML

<ej-progressbar value="45" height="20" text="45%" [minValue]="minValue"></ej-progressbar>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

  minValue: int;
  constructor() {
      this.minValue=10;
  }
}

percentage `number`

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

Default Value

Example

HTML

<ej-progressbar height="20" text="10%" [percentage]="percentage"></ej-progressbar>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
percentage: int;
  constructor() {
      this.percentage=10;
  }
}

showRoundedCorner `boolean`

Displays rounded corner borders on the progressBar control.

Default Value

false

Example

HTML

<ej-progressbar value="45" height="20" text="45%" [showRoundedCorner]=true></ej-progressbar>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

 
  constructor() {
  }
}

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

<ej-progressbar value="45" height="20" text="45%"></ej-progressbar>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

 
  constructor() {
  }
}

TEXT

value `number`

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

Default Value

Example

HTML

<ej-progressbar value="45" height="20" text="45%" ></ej-progressbar>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

 
  constructor() {
  }
}

width `number|string`

Defines the width of the ProgressBar.

Default Value

null

Example

HTML

<ej-progressbar value="45" height="20" text="45%" width="500px"></ej-progressbar>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

 
  constructor() {
  }
}

Methods

destroy()

Destroy the progressbar widget

Example

HTML

<ej-progressbar value="45" height="20" text="45%" ></ej-progressbar>

<button type="button" (click)="OnClick()">Destroy</button>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

  
  constructor() {
      
  }
   OnClick(){


var obj = $("#progressbar").data("ejProgressBar");


obj.destroy();

}
}

HTML

<ej-progressbar value="45" height="20" text="45%" ></ej-progressbar>

<button type="button" (click)="OnClick()">Destroy</button>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

  
  constructor() {
      
  }
   OnClick(){


$("#progressbar").ejProgressBar("destroy");

}
}

disable()

Disables the progressbar control

Example

HTML

<ej-progressbar value="45" height="20" text="45%" ></ej-progressbar>

<button type="button" (click)="OnClick()">Disable</button>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

  
  constructor() {
      
  }
   OnClick(){


var obj = $("#progressbar").data("ejProgressBar");


obj.disable();

}
}

HTML

<ej-progressbar value="45" height="20" text="45%" ></ej-progressbar>

<button type="button" (click)="OnClick()">Disable</button>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

  
  constructor() {
      
  }
   OnClick(){


$("#progressbar").ejProgressBar("disable");

}
}

enable()

Enables the progressbar control

Example

HTML

<ej-progressbar value="45" height="20" text="45%" [enabled]=false ></ej-progressbar>

<button type="button" (click)="OnClick()">enable</button>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

  
  constructor() {
      
  }
   OnClick(){


var obj = $("#progressbar").data("ejProgressBar");


obj.enable();

}
}

HTML

<ej-progressbar value="45" height="20" text="45%" [enabled]=false></ej-progressbar>

<button type="button" (click)="OnClick()">Enable</button>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

  
  constructor() {
      
  }
   OnClick(){


$("#progressbar").ejProgressBar("enable");

}
}

getPercentage()

Returns the current progress value in percent.

Returns:

number

Example

HTML

<ej-progressbar value="45" height="20" text="45%" ></ej-progressbar>

<button type="button" (click)="OnClick()">Get Percentage</button>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

  
  constructor() {
      
  }
   OnClick(){


var obj = $("#progressbar").data("ejProgressBar");


obj.getPercentage();

}
}

HTML

<ej-progressbar value="45" height="20" text="45%" ></ej-progressbar>

<button type="button" (click)="OnClick()">GETPERCENTAGE</button>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

  
  constructor() {
      
  }
   OnClick(){


$("#progressbar").ejProgressBar("getPercentage");

}
}

getValue()

Returns the current progress value

Returns:

number

Example

HTML

<ej-progressbar value="45" height="20" text="45%" ></ej-progressbar>

<button type="button" (click)="OnClick()">Get Value</button>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

  
  constructor() {
      
  }
   OnClick(){


var obj = $("#progressbar").data("ejProgressBar");


obj.getValue();

}
}

HTML

<ej-progressbar value="45" height="20" text="45%" ></ej-progressbar>

<button type="button" (click)="OnClick()">GETVALUE</button>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

  
  constructor() {
      
  }
   OnClick(){


$("#progressbar").ejProgressBar("getValue");

}
}

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

CHANGE

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

COMPLETE

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

<ej-progressbar value="45" height="20" text="45%" (create)="create($event)" ></ej-progressbar>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

  
  constructor() {
      
  }
   create(args){




}
}

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

<ej-progressbar value="45" height="20" text="45%" (destroy)="Destroy($event)" ></ej-progressbar>
<button type="button" (click)="OnClick()">Destroy</button>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

  
  constructor() {
      
  }
   Destroy(args){




}
    OnClick(){


var obj = $("#progressbar").data("ejProgressBar");


obj.destroy();
    }
}

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

<ej-progressbar value="45" height="20" text="45%" (start)="start($event)" ></ej-progressbar>

import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html',
  styleUrls: ['./progressbar.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{

  
  constructor() {
      
  }
   start(args){




}
}

ejProgressBar

Example

Requires

Members

cssClass string

Default Value

Example

enabled boolean

Default Value

Example

enablePersistence boolean

Default Value

Example

enableRTL boolean

Default Value

Example

height number|string

Default Value

Example

htmlAttributes object

Default Value

Example

maxValue number

Default Value

Example

minValue number

Default Value

Example

percentage number

Default Value

Example

showRoundedCorner boolean

Default Value

Example

text string

Default Value

Example

value number

Default Value

Example

width number|string

Default Value

Example

Methods

destroy()

Example

disable()

Example

enable()

Example

getPercentage()

Returns:

Example

getValue()

Returns:

Example

Events

change

Example

complete

Example

create

Example

destroy

Example

start

Example

cssClass `string`

enabled `boolean`

enablePersistence `boolean`

enableRTL `boolean`

height `number|string`

htmlAttributes `object`

maxValue `number`

minValue `number`

percentage `number`

showRoundedCorner `boolean`

text `string`

value `number`

width `number|string`