Directory

← Back

CircularProgressBar Flow

Circular shaped progress indicator for Vaadin 24, Vaadin 23.3.x and Vaadin 14

Author

Contributors

Rating

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...");

Compatibility

(Loading compatibility data...)

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 1.3.2

  • Fix broken tooltips with Vaadin 24
Released
2023-04-03
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 23+
Vaadin 14 in 0.1.0
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
Microsoft Edge

CircularProgressBar Flow - Vaadin Add-on Directory

Circular shaped progress indicator for Vaadin 24, Vaadin 23.3.x and Vaadin 14 CircularProgressBar Flow - Vaadin Add-on Directory
### 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
Online