CircularProgressBar Flow
Circular shaped progress indicator for Vaadin 24, Vaadin 23.3.x and Vaadin 14
Overview
This is a circular shaped progress indicator made as web component using Svg.
This add-on is inspired by https://vaadin.com/directory/component/circular-progressbar-add-on1
Features:
- Configurable border
- Optional caption
- Animated and non-animated modes
- Configurable animation speed
- Implements HasTooltip
Styling with CSS custom properties, use integer numbers
- --progress-circle-width
- --progress-caption-font-size
- --progress-percent-font-size
Sample code
CircularProgressBar progress = new CircularProgressBar();
progress.setWidth("200px");
progress.setHeight("200px");
progress.setPercent(0.5);
progress.setCaption("Loading...");
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Version 0.1.0
- V14 backport
- Released
- 2023-01-03
- Maturity
- BETA
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 14
- Vaadin 23+ in 1.0.0
- Browser
- Firefox
- Opera
- Safari
- Google Chrome
- iOS Browser
- Android Browser
- Microsoft Edge
Vaadin Add-on Directory
Find open-source widgets, add-ons, themes, and integrations for your Vaadin application.
The channel for finding, promoting, and distributing Vaadin add-ons.