Introduction
Getting Started
Vue 2 End of Support
Native Components
- Animation
- Buttons
- Chartsupdated
- Conversational UInew
- Data Query
- Data Tools
- Date Inputs
- Date Math
- Dialogs
- Drawing
- Dropdownsupdated
- Editor
- Excel Export
- File Saver
- Form
- Gauges
- Grid
- Icons
- Indicators
- Inputs
- Labels
- Layoutupdated
- ListBox
- ListView
- Notification
- PDF Processing
- Popup
- Progress Bars
- - Overview
  - Getting Started
  - ProgressBar
  - - Overview
    - Value and Ranges
    - Disabled ProgressBar
    - Orientation
    - Direction
    - Label
    - Animation
    - Appearance
    - Accessibility
  - ChunkProgressBar
  - Globalization
  - API
- Scheduler
- ScrollView
- Tooltip
- TreeList
- TreeView
- Upload
Wrapper Components
Sample Applications
Styling & Themes
Common Features
Project Setup
Knowledge Base
Changelog
FAQ
Troubleshooting

Components / Progress Bars / ProgressBar / Value and Ranges /

New to Kendo UI for Vue? Start a free 30-day trial

Value and Ranges

The ProgressBar provides option for setting its value or a range of values and for indicating the progress of an ongoing task.

To set the value of the ProgressBar, use its value option.
To define the start and end values of the range, use the min and max ProgressBar settings respectively.
To indicate that a task is still in progress, set the value property to null.

Example

View Source

Change Theme:

Suggested Links

API Reference of the ProgressBarProps

Disabled ProgressBar

Is this article helpful?

Thank you for your feedback!