Angular ProgressBar - Overview
The ProgressBar is a UI component that shows current progress.
The following code adds a simple ProgressBar to your page. The value property specifies the current value. The min and max properties limit the range of accepted values. The progress is measured in percentages and calculated by the following formula: (value / max) * 100
. If the current progress is unknown yet, set the value property to false.
jQuery
<div id="progressBarContainer"></div>
$(function(){ $("#progressBarContainer").dxProgressBar({ min: 0, max: 100, value: 49 }); });
Angular
<dx-progress-bar [min]="0" [max]="100" [value]="49"> </dx-progress-bar>
import { DxProgressBarModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxProgressBarModule ], // ... })
Vue
<template> <DxProgressBar :min="0" :max="100" :value="49" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxProgressBar } from 'devextreme-vue/progress-bar'; export default { components: { DxProgressBar } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { ProgressBar } from 'devextreme-react/progress-bar'; class App extends React.Component { constructor(props) { super(props); } render() { return ( <ProgressBar min={0} max={100} value={49} /> ); } } export default App;
When the ProgressBar reaches the maximum value, the complete event is raised. You can handle it using the onComplete function.
jQuery
$(function() { $("#progressBarContainer").dxProgressBar({ min: 0, max: 100, value: 49, onComplete: function() { DevExpress.ui.dialog.alert("Completed"); } }); });
Angular
<dx-progress-bar [min]="0" [max]="100" [value]="49" [onComplete]="handleComplete"> </dx-progress-bar>
import { DxProgressBarModule } from "devextreme-angular"; import dialog from "devextreme/ui/dialog"; // ... export class AppComponent { handleComplete(e) { dialog.alert('Completed'); } } @NgModule({ imports: [ // ... DxProgressBarModule ], // ... })
Vue
<template> <DxProgressBar :min="0" :max="100" :value="49" @complete="handleComplete" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxProgressBar } from 'devextreme-vue/progress-bar'; import dialog from "devextreme/ui/dialog"; export default { components: { DxProgressBar }, methods: { handleComplete() { dialog.alert('Completed'); } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { ProgressBar } from 'devextreme-react/progress-bar'; import dialog from "devextreme/ui/dialog"; class App extends React.Component { constructor(props) { super(props); } onComplete() { dialog.alert('Completed'); } render() { return ( <ProgressBar min={0} max={100} value={49} onComplete={this.onComplete} /> ); } } export default App;
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout
- ProgressBar - Progress Status
- ProgressBar - Handle the Value Change Event
- ProgressBar API Reference
If you have technical questions, please create a support ticket in the DevExpress Support Center.