msc-circle-progress

 

<msc-circle-progress /> provides progress with circle shape. Developers could use it to indicate upload、form complete status for users.

!

Basic Usage

<msc-circle-progress /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-circle-progress />'s html structure and everything will be all set.

- Required Script

``html
type="module"
src="https://your-domain/wc-msc-circle-progress.js">

`

- Structure

Put <msc-circle-progress /> into HTML document. It will have different functions and looks with attribute mutation.

`html



`

Otherwise, developers could also choose remoteconfig to fetch config for <msc-circle-progress />.

`html
remoteconfig="https://your-domain/api-path"
>

`

JavaScript Instantiation

<msc-circle-progress /> could also use JavaScript to create DOM element. Here comes some examples.

`html

`

Style Customization

Developers could apply styles to decorate <msc-circle-progress />'s looking.

`html

`

Otherwise, apply pseudo class ::part(value) to direct style text element.

`html

`

Attributes

<msc-circle-progress /> supports some attributes to let it become more convenience & useful.

- size

Set size for <msc-circle-progress />. It will change progress size. Default is 20 (not set).

`html
size="20"
>
...

`

- value

Set value for <msc-circle-progress />. Default is 0 (not set).

`html
value="0"
>
...

`

- max

Set max for <msc-circle-progress />. Default is 100 (not set).

`html
max="100"
>
...

`

- round

It will switch <msc-circle-progress /> bar as round once set. Default is false (not set).

`html
round
>
...

`

Properties

| Property Name | Type | Description |
| ----------- | ----------- | ----------- |
| size | Number | Getter / Setter for size. Default is 20. |
| value | Number | Getter / Setter for value. Default is 0. |
| max | Number | Getter / Setter for max. Default is 100. |
| round | Boolean | Getter / Setter for round. Default is false`. |

Method

| Method Signature | Description |
| ----------- | ----------- |
| refresh | Force refresh <msc-circle-progress />'s redering. Developers could call this method when <msc-circle-progress /> mutated. |

Reference

- <msc-circle-progress />