14.3.5 • Published 8 months ago

@rmwc/circular-progress v14.3.5

Weekly downloads
5,163
License
MIT
Repository
github
Last release
8 months ago

Circular Progress

Circular progress indicators display progress by animating an indicator along an invisible circular track in a clockwise direction. They can be applied directly to a surface, such as a button or card.

  • Module @rmwc/circular-progress
  • Import styles:
    • Using CSS Loader
      • import '@rmwc/circular-progress/styles';
    • Or include stylesheets
      • '@rmwc/circular-progress/circular-progress.css'

Basic Usage

<CircularProgress label="progress" />
<>
  <CircularProgress label="progress" progress={0.3} />
  <CircularProgress label="progress" progress={0.6} />
  <CircularProgress label="progress" progress={0.9} />
  <CircularProgress label="progress" progress={1} />
</>

Sizing

<>
  <CircularProgress label="xsmall progress" size="xsmall" />
  <CircularProgress label="small progress" size="small" />
  <CircularProgress label="medium progress" size="medium" />
  <CircularProgress label="large progress" size="large" />
  <CircularProgress label="xlarge progress" size="xlarge" />
  <CircularProgress label="progress" size={72} />
</>

Usage with other components

<>
  <Button
    icon={<CircularProgress label="progress" theme="secondary" />}
    label="Cookies"
  />

  <List>
    <SimpleListItem
      graphic={<CircularProgress label="progress" />}
      text="Pizza"
    />
    <SimpleListItem graphic="favorite" text="Icecream" />
  </List>

  <ChipSet>
    <Chip
      icon={<CircularProgress label="progress" size="xsmall" />}
      label="Donuts"
    />
  </ChipSet>
</>

CircularProgress

A Circular Progress indicator.

Props

NameTypeDescription
closedbooleanHides the progress bar. Adding / removing this prop will trigger an animation in or out.
labelstringThe label which will set an aria-label.
maxnumberMax value for determinate progress bars.
minnumberMin value for determinate progress bars.
progressnumberValue for determinate progress bars.
sizenumber \| SizeThe size of the loader you would like to render.
14.3.5

8 months ago

14.3.4

9 months ago

14.3.3

10 months ago

14.2.7

1 year ago

14.2.8

1 year ago

14.2.9

1 year ago

14.2.5

1 year ago

14.2.6

1 year ago

14.3.0

12 months ago

14.3.1

12 months ago

14.3.2

11 months ago

14.2.2

1 year ago

14.2.0

1 year ago

14.2.1

1 year ago

14.1.5

1 year ago

14.1.4

1 year ago

14.1.3

1 year ago

14.1.2

1 year ago

14.1.1

1 year ago

14.1.0

1 year ago

14.0.12

1 year ago

14.0.11

1 year ago

14.0.10

1 year ago

14.0.9

1 year ago

14.0.8

1 year ago

14.0.7

1 year ago

14.0.6

1 year ago

14.0.5

2 years ago

14.0.4

2 years ago

14.0.1-alpha.0

2 years ago

14.0.2-alpha.3

2 years ago

14.0.2-alpha.0

2 years ago

14.0.2-alpha.1

2 years ago

14.0.2-alpha.6

2 years ago

14.0.2-alpha.7

2 years ago

14.0.2-alpha.4

2 years ago

14.0.2-alpha.5

2 years ago

14.0.0

2 years ago

14.0.1

2 years ago

14.0.0-alpha.0

2 years ago

14.0.2

2 years ago

14.0.3

2 years ago

8.0.8

2 years ago

8.0.7

2 years ago

8.0.6

2 years ago

8.0.5

2 years ago

8.0.4

3 years ago

8.0.3

3 years ago

8.0.2

3 years ago

8.0.1

3 years ago

8.0.0

3 years ago

7.0.3

3 years ago

7.0.2

3 years ago

7.0.1

3 years ago

7.0.0

3 years ago

6.1.4

5 years ago

6.0.14

5 years ago

6.0.13

5 years ago

6.0.12

5 years ago

6.0.11

5 years ago

6.0.10

5 years ago

6.0.9

5 years ago

6.0.5

5 years ago

6.0.4

5 years ago

6.0.3

5 years ago

6.0.2

5 years ago

6.0.1

5 years ago

6.0.0

5 years ago

6.0.0-rc.1

5 years ago

6.0.0-rc.4

5 years ago

6.0.0-rc.3

5 years ago

6.0.0-rc.2

5 years ago

6.0.0-rc.0

5 years ago

6.0.0-alpha.16

5 years ago

6.0.0-alpha.14

5 years ago

6.0.0-alpha.15

5 years ago

6.0.0-alpha.13

5 years ago

6.0.0-alpha.12

5 years ago

6.0.0-alpha.11

5 years ago

6.0.0-alpha.7

6 years ago

5.7.2

6 years ago

6.0.0-alpha.4

6 years ago

6.0.0-alpha.5

6 years ago

6.0.0-alpha.6

6 years ago

6.0.0-alpha.3

6 years ago

6.0.0-alpha.1

6 years ago

5.7.0

6 years ago

5.6.0

6 years ago

5.5.2

6 years ago

5.5.1

6 years ago

5.5.0

6 years ago

5.4.3

6 years ago

5.4.2

6 years ago

5.4.1

6 years ago

5.4.0

6 years ago

5.3.1

6 years ago

5.3.0

6 years ago

5.2.2

6 years ago

5.2.1

6 years ago

5.2.0

6 years ago

5.2.0-alpha.0

6 years ago

5.1.8

6 years ago

5.1.7

6 years ago

5.1.6

6 years ago

5.1.5

6 years ago

5.1.4

6 years ago

5.1.3

6 years ago

5.1.2

6 years ago

5.1.1

6 years ago

5.1.0

6 years ago

5.0.30-rc.0

6 years ago

5.0.29-rc.0

6 years ago

5.0.28-rc.0

6 years ago

5.0.27-rc.0

6 years ago

5.0.26-rc.0

6 years ago

5.0.25-rc.0

6 years ago

5.0.24-rc.0

6 years ago

5.0.23-rc.0

6 years ago

5.0.23-alpha.0

6 years ago

5.0.22-alpha.0

6 years ago

5.0.21-alpha.0

6 years ago

5.0.20-alpha.0

6 years ago

5.0.19-alpha.0

6 years ago

5.0.18-alpha.0

6 years ago

5.0.17-alpha.0

6 years ago

5.0.16-alpha.0

6 years ago

5.0.15-alpha.0

6 years ago

5.0.14-alpha.0

6 years ago

5.0.13-alpha.0

6 years ago

5.0.12-alpha.0

6 years ago

5.0.8-alpha.0

6 years ago

5.0.7-alpha.0

6 years ago

5.0.6-alpha.0

6 years ago

5.0.5-alpha.0

6 years ago

5.0.4-alpha.0

6 years ago

5.0.3-alpha.0

6 years ago

5.0.2-alpha.0

6 years ago

5.0.1-alpha.0

6 years ago

5.0.0-alpha.0

6 years ago

4.0.6

7 years ago

4.0.5

7 years ago

4.0.4

7 years ago

4.0.1

7 years ago

4.0.0

7 years ago

3.0.11

7 years ago

3.0.10

7 years ago

3.0.9

7 years ago

3.0.8

7 years ago

3.0.7

7 years ago

3.0.6

7 years ago

3.0.5

7 years ago

3.0.4

7 years ago

3.0.0

7 years ago

2.2.0

7 years ago