Vuely
  • Introduction
  • Folder Structure
  • Vuely VueJs
    • Different Layouts
      • Adding Menu In Different Layouts
    • Installation
    • Adding New Component
    • Translate The App(Multi Language Support)
    • Adding New Widgets
    • Themes
    • Style Customization
    • Build an App from Scratch
    • Seed Project
    • Deployment
    • UI Components
      • Buttons
      • Cards
      • Selection controls
      • Carousel
      • Chips
      • Date/Month Pickers
      • Dialog
      • Grid
      • Input / Text field
      • List
      • Menu
      • Progress
      • Banner
      • Select
      • Slider
      • Tabs
      • Toolbar
      • Timepicker
      • Forms
  • Vuely-Laravel
    • Folder Structure
    • Installation Vuely-Laravel
    • Customization
  • Vuely-Laravel with Api Authentication
    • Getting Started
    • Passport Authentication
    • Run Vuely-Laravel-Passport
  • Vuely ExpressJs
    • Folder Structure
    • Installation
    • Layouts
    • Style Customization
    • Deployment
    • Translate the App
    • Browsers Compatibilty
    • Credits
  • Vuely Angular Version
    • Folder Structure
    • Installation
    • Layouts
    • Adding/Deleting Menu & Component
    • RTL
    • Deployment
  • Credits
  • Template Update
  • FAQ's (Frequently Asked Questions)
  • Changelog
  • Customer Support
Powered by GitBook
On this page
  1. Vuely VueJs
  2. UI Components

Progress

PreviousMenuNextBanner

Last updated 5 years ago

The v-progress-circular component is used to convey data circularly to users. It also can be put into an indeterminate state to portray loading.

The v-progress-linear component is used to convey data visually to users. They can also represent an indeterminate amount, such as loading or processing.

<template>
  <div class="text-center">
    <v-progress-circular :value="20"></v-progress-circular>
    <v-progress-circular :value="40"></v-progress-circular>
    <v-progress-circular :value="60"></v-progress-circular>
    
    <v-progress-linear value="15"></v-progress-linear>
    <v-progress-linear
      indeterminate
      color="yellow darken-2"
    ></v-progress-linear>
  </div>
</template>