Getting Started
Layout
Components
Design
Circular Progress
Circular Progress is a UI component that displays the progress of a task or process using a circular shape. It typically consists of a circular track and a circular bar that fills up as the task progresses.
0
Title
<div id="s1" class="null-circular-progress-container null-padding-20 null-box-shadow null-background-white null-border-radius">
<div class="null-flex null-flex-direction-column">
<div class="null-circular-progress null-position-relative null-flex ">
<span class="null-circular-progress-value null-font-weight-bold null-position-relative"></span>
</div><!--End null-circular-progress-->
<div class="null-circular-progress-content-container null-margin-top-20">
<div class="null-circular-progress-content null-font-size-18 null-font-weight-bold">
Title
</div><!--End null-circular-progress-content-->
</div><!--End null-circular-progress-content-container-->
</div><!--End null-flex-->
</div><!--End null-circular-progress-container-->
To use the Null Circular Progress component, simply pass a unique ID to the null_circular_progress function. There are two arguments, both of which are values of an object:
- endValue: This value determines the point at which the progress will end. It is a dynamic value that you can set based on your needs.
- speed: This value determines the speed of the progress animation. By default, it is set to 50.
Note that the component will automatically update the progress bar as it progresses, and will stop once it reaches the endValue.
null_circular_progress("s1", {
endValue: 30,
speed: 50
});
CSS Variables:
Variable Name: --null-circular-progress-size
Variable Value: 200px