CircularProgressBar Flow

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

View larger

Close

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

• Online Demo
• View on GitHub

Compatibility