mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 23:02:54 +01:00
53f0d6320e
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
27 lines
813 B
Markdown
27 lines
813 B
Markdown
---
|
|
title: Progress Circle
|
|
hide_title: true
|
|
---
|
|
|
|
# Progress Circle
|
|
|
|
A UI component for visualizing progress in percentage where 100% match to 360 degrees. The component takes a minimum value, a maximum value and a target value for converting the number range into percentage.
|
|
|
|
By default the progress animates towards the target value.
|
|
|
|
<div className="ndl-image-with-background">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
After importing the module you will see a component called **Progress Circle** in your project.
|
|
|
|
The example below shows how to hook the **Progress Circle** up to minimum and maximum values, and give a target value to visualize in percentage.
|
|
|
|
<div className="ndl-image-with-background xl">
|
|
|
|
|
|
|
|
</div>
|