# `arc`

```strand
element arc: node
```

An arc or ring gauge: `arc { value: cpu.usage; sweep: 270deg; stroke:
4, $accent }`. Its line is its `stroke:`: the width (4 px unset), the
value's paint (else `color`, else `$accent`) and the styles (`cap`,
`dash`). Its box is square, `size:` (24 px unset), drawn on its
smaller side; `width` and `height` size the box too, never the line
(one `width` beside a `size:` and no `stroke:` is warned, its fix
`stroke`).

It takes no children.

Also every prop and event of [`node`](/reference/elements/node.html.md).

| Prop | Type | |
| --- | --- | --- |
| `value` | `float` | How full it is, in `range` (0 to 1 when unset); a value outside it is drawn at its nearer end. |
| `range` | `(float \| auto, float \| auto) \| auto` | The values its ends stand for, as a `meter`'s: `range: 0, 100`, `range: auto` (0 to 1 when unset). |
| `sweep` | `angle` | The angle of the whole arc. |
| `track` | `paint` | The paint of the unfilled part (unset, the line's colour, else `color`, at 15%). |