assignment_late
Why donate
travel_explore
API Explorer
widgets
Vue Components
Ajax Bar
Avatar
Badge
Banner
Bar
Breadcrumbs
Card
Carousel
Chat Message
Chip
Circular Progress
Color Picker
Dialog
Editor - WYSIWYG
Expansion Item
Floating Action Button
Icon
Img
Infinite Scroll
Inner Loading
Intersection
Knob
Linear Progress
List & List Items
Markup Table
Menu
No SSR
Pagination
Parallax
Popup Edit
Popup Proxy
Pull to refresh
Rating
Responsive
Scroll Area
Separator
Skeleton
Slide Item
Slide Transition
Space
Spinners
Splitter
Stepper
Table
Tabs
Tab Panels
Timeline
Toolbar
Tooltip
Tree
Uploader
Video
Virtual Scroll
security
Security
build
Quasar CLI (with Vite)
Upgrade Guide
Creating a New Project
The /quasar.config File
Convert q/app-webpack Project
Browser Compatibility
TypeScript Support
Directory Structure
Commands List
CSS Preprocessors
Page Routing with VueRouter
Lazy Loading - Code Splitting
Handling Assets
Boot Files
Prefetch Feature
API Proxying
Handling Vite
Handling import.meta.env
State Management with Pinia
Lint and Format Code
Testing & Auditing
SSR Mode
Introduction
Writing Universal Code
Preparation
Installing SSR Deps
Build Commands
Configuring SSR
The ssrContext
SSR Webserver
SSR Middleware
Handling 404 and 500 Errors
Hybrid SSR + partial CSR
new
SSR with TypeScript
Vue SSR Directives
App Icons for SSR
SEO for SSR
Client Side Hydration
SSR with PWA
SSR FAQ
Deploying SSR
Developing Mobile Apps
Fetching Data
Opening Dev Server To Public
build
Quasar CLI (with Webpack)
note_add
App Extensions
The QCircularProgress component displays a colored circular progress. The bar can either have a determinate progress, or an indeterminate animation. It should be used to inform the user that an action is occurring in the background.
Loading QCircularProgress API...
Usage
By default, QCircularProgress inherits current text color (as arc progress color and inner label color) and current font size (as component size). For customization, you can use the size and color related props.
Determined state
Determinate and reverse
Offset angle
Custom min/max (same model)
In the example below, show-value property also enables the default slot, so you can fill it with custom content, like even a QAvatar or a QTooltip. The font-size prop refers to the inner label font size.
Show value
Indeterminate state
Rounded arc of progress (v2.8.4+)
Standard sizes
Ready for more?
Caught a mistake?Edit this page in browser
1. Introduction
2. QCircularProgress API
3. Usage
Copyright © 2015-present PULSARDEV SRL, Razvan Stoenescu