Vue ProgressBar - Progress Status

The progress status displays a numeric value indicating the made progress. Whether the progress status is visible or not depends on the showStatus property. To format the status string, use the statusFormat function. It should return a string value.

jQuery
JavaScript
$(function(){
     $("#progressBarContainer").dxProgressBar({
         value: 40,
         min: 0,
         max: 100,
         showStatus: true,
         statusFormat: function(value) {
             return value + " USD";
         }
     });
});
Angular
HTML
TypeScript
<dx-progress-bar
    [min]="0"
    [max]="100"
    [value]="40"
    [showStatus]="true"
    [statusFormat]="statusFormat">
</dx-progress-bar>
import { DxProgressBarModule } from "devextreme-angular";
// ...
export class AppComponent {
    statusFormat(value) {
        return value + " USD";
    }
}
@NgModule({
    imports: [
        // ...
        DxProgressBarModule
    ],
    // ...
})
Vue
<template>
    <DxProgressBar
        :min="0"
        :max="100"
        :value="40"
        :show-status="true"
        :status-format="statusFormat"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxProgressBar } from 'devextreme-vue/progress-bar';

export default {
    components: {
        DxProgressBar
    },
    methods: {
        statusFormat(value) {
            return value + " USD";
        }
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { ProgressBar } from 'devextreme-react/progress-bar';

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    statusFormat(value) {
        return value + " USD";
    }

    render() {
        return (
            <ProgressBar
                min={0}
                max={100}
                value={40}
                showStatus={true}
                statusFormat={this.statusFormat}
            />
        );
    }
}

export default App;
See Also