Component <SemicircleBar />

Props

Props	Type	Meaning	Possible values
barPercent	number	Set bar prorgess	from 0 to 100
markPercent	number	Set mark on the bar	from 0 to 100
size	number	Set size of whole bar	from 0 to any number
type	string	Change line to dashes	dashed / solid
progress	string	Progress text	Any string
value	string	Value of the bar text	Any stirng
units	string	Units text	Any stirng

---

Variants

Examples:

<SemicircleBar barPercent={20} value="20" />
<SemicircleBar barPercent={60} value="60" />
<SemicircleBar barPercent={90} value="90" />

20

60

90

---

Sizes

Examples:

<SemicircleBar size={180} barPercent={20} value="20" />
<SemicircleBar size={320} barPercent={60} value="60" />
<SemicircleBar size={480} barPercent={90} value="90" />

20

60

90

---

Type

Examples:

<SemicircleBar barPercent={20} value="20" type="solid" />
<SemicircleBar barPercent={70} value="70" type="dashed" />

20

70

---

Text variants

Examples:

<SemicircleBar barPercent={20} />
<SemicircleBar barPercent={45} value="45" />
<SemicircleBar barPercent={65} value="65" units="Happines" />
<SemicircleBar barPercent={90} progress="+10 pts" value="90" units="Happines" />

45

65Happines

+10 pts90Happines

---

With mark

Examples:

<SemicircleBar barPercent={20} markPercent={80} value="20" />
<SemicircleBar barPercent={60} markPercent={20} value="60" />
<SemicircleBar barPercent={90} markPercent={50} value="90" />

20

60

90