U4-10551 - Circular progressbar as a directive

Created by Zsolt Laszlo 17 Oct 2017, 07:17:04 Updated by Mads Rasmussen 28 Oct 2017, 05:05:15

Subtask of: U4-10305

Most of the calculations are ready for the circular progressbar. Now, we have to recreate it as a directive, so our code will be cleaner and the progressbar will be easy to reuse.

1 Attachments


Zsolt Laszlo 25 Oct 2017, 11:18:49


Its a new component, which uses SVG to render a progress circle with a number in the center. It very important to test in many different browsers, because SVG can have problems.

  • Check the documentation for umbProgressCircle (generated by gulp)
  • Place the component anywhere in the backoffice
  • Try to play with the different attributes (size, font-size, stroke-color, percentage)
  • Test it in multiple browsers

If you want to have an example how it should look like:

  • Go to the new help drawer, by clicking the question mark in the bottom left corner of the backoffice
  • At the top of the help drawer you should be able to see the new progress circle

Or check the attached image

Priority: Normal

Type: Task

State: Fixed


Difficulty: Normal


Backwards Compatible: True

Fix Submitted:

Affected versions: 7.8.0

Due in version: 7.8.0

Sprint: Sprint 70

Story Points: 1