Circular Progress Bar

Circular Progress Bar Component

Design

Code

Usage

This component is used to show Circular Progress Bar for a respective page.

Default

<nile-circular-progressbar value="40"></nile-circular-progressbar>
<nile-circular-progressbar value="80" content="Wait"></nile-circular-progressbar>

Variants

<nile-circular-progressbar content="text"></nile-circular-progressbar>
<nile-circular-progressbar value="80" size="60"></nile-circular-progressbar>
<nile-circular-progressbar></nile-circular-progressbar>
<nile-circular-progressbar value="30" content=" "></nile-circular-progressbar>

Attributes & Properties

Name	Description	Type	Default
value	Value determines the amount of percentage to show in the Circular Progress bar	Number	0
size	Size determines the size of the Circular Progress Bar that will be showed.	number (px)	40
content	Content is used to insert text into the Circle while removing the main text	string	''

Events

Name	Description	Event Detail
nile-complete	Emitted when the progress reaches 100%.	{ message: 'Nile Circular Progress reached 100%' }