background

Kendo UI for Vue

Vue ProgressBar

  • Track the progress of a task in any Vue application with this customizable vertical or horizontal progress bar.
  • Part of the Kendo UI for Vue library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
ProgressBar
  • Overview

    The Vue ProgressBar component displays and tracks the progress of a task or process in your applications. Various configuration options to control the orientation and direction of the component and styling options to help make it your own are built in.

    See the Vue ProgressBar demo

    vue-progressbar-overview
  • Value and Ranges

    Properties to allow you to set the initial displayed value and min/max ranges are included for quick configuration.

    See the Vue ProgressBar Value and Ranges demo

    progressbar-value-and-ranges
  • Orientation

    The Vue ProgressBar helps you fit the component into your layout with choices to rend horizontally (default) or vertically).

    See the Vue ProgressBar Orientation demo

    orientation-progressbar
  • Direction

    While the default behavior of the Vue ProgressBar is for the gauge to fill from left to right, you can choose to reverse the direction.

    See the Vue ProgressBar Direction demo

    progressbar-direction
  • Labels

    The Vue ProgressBar allows you to choose the position and visibility of the data label that indicated the status of the task in progress.

    See the Vue ProgressBar Label demo

    progressbar-label
  • Appearance

    Quickly customize your Vue ProgressBar by setting its size and customizing the label and status indicator.

    See the Vue ProgressBar Appearance demo

    progressbar-appearance
  • Globalization

    The Vue ProgressBar helps you easily adapt to specific locals by using to appropriate symbols, allowing for the easy customization of messaged, and by supporting right-to-left display.

    See the Vue ProgressBar RTL demo

    rtl-support
Next Steps

Get Started with Kendo UI for Vue

Kendo UI for Vue - Kendoka