Directory

← Back

Circular Progressbar Add-on

Customizable circular progress bar

Author

Rating

Popularity

100+

A circular progress bar for Vaadin 8

Created by using SVG and JavaScript

Features

  • Mimics the standard progress bar by using Valo presets
  • Similar API as the standard progress bar
  • Uses transition like behavior on value updates
  • A description can be added underneath the percentage area
  • Ability to set the scale (1.0f represents a full circle, 0.5f a semicircle)
  • Ability to set a background image
  • Custom styling can still be done via SCSS (Some examples)

Missing a feature or found a bug? Create an issue on Github!

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

  • added ie support | thanks @nerduel for the contribution!
Released
2019-03-08
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 8.0+
Browser
Firefox
Opera
Safari
Google Chrome
Android Browser
Internet Explorer
Windows Phone
Microsoft Edge

Circular Progressbar Add-on - Vaadin Add-on Directory

Customizable circular progress bar Circular Progressbar Add-on - Vaadin Add-on Directory
### A circular progress bar for Vaadin 8 Created by using SVG and JavaScript ### Features * Mimics the standard progress bar by using Valo presets * Similar API as the standard progress bar * Uses transition like behavior on value updates * A description can be added underneath the percentage area * Ability to set the scale (1.0f represents a full circle, 0.5f a semicircle) * Ability to set a background image * Custom styling can still be done via SCSS ([Some examples](https://github.com/appreciated/circular-progress-bar/tree/master/circular-progressbar-addon/src/main/resources)) [Missing a feature or found a bug? Create an issue on Github!](https://github.com/appreciated/circular-progress-bar/issues)
Source Code

Circular Progressbar Add-on version 0.5.2
null

Circular Progressbar Add-on version 0.6
- adjusted the API to match the standard Progressbar - improved styling to look more like the standard Progressbar

Circular Progressbar Add-on version 0.6.1
- added styling possiblity - added manifest entry (addon scss will be added automatically [after a 'mvn install']) - applied styling rules from valo progressbar to the circular progressbar

Circular Progressbar Add-on version 0.6.2
- track color fixes

Circular Progressbar Add-on version 0.7
- added possibility to add a Text underneath the percentage presentation - added possibility to set the scale. While 1.0f would represent a full circle 0.5f would be a semicircle - added an example in the scss how to rotate the circular progressbar without the text in the middle

Circular Progressbar Add-on version 0.8
Added ability to set a background image

Circular Progressbar Add-on version 0.8.1
- bugfix #### 0.8 - Ability to set a background image

Circular Progressbar Add-on version 0.8.2
Updated Vaadin Version to 8.0.6

Circular Progressbar Add-on version 1.0.1
- updated dependencies - fixed some rounding issues on the client side leading to showing wrong percentages (instead of 70 -> 69) - version bump

Circular Progressbar Add-on version 1.1.0
- added ie support | thanks @nerduel for the contribution!

Online