\n\n## Installation\n\n```\nnpm install @material/circular-progress\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n```\n\n### Accessibility\n\nProgress bars conform to the [WAI-ARIA Progressbar Specification](https://www.w3.org/TR/wai-aria/#progressbar). The supported ARIA attributes for this progress bar are:\n\n| Attribute | Description |\n| --------- | ----------- |\n| `aria-label` | Label indicating how the progress bar should be announced to the user. |\n| `aria-valuemin` | The minimum numeric value of the progress bar, which should always be `0`. |\n| `aria-valuemax` | The maximum numeric value of the progress bar, which should always be `1`. |\n| `aria-valuenow` | A numeric value between `aria-valuemin` and `aria-valuemax` indicating the progress value of the primary progress bar. This attribute is removed in indeterminate progress bars. |\n\nNote that `aria-label`, `aria-valuemin`, and `aria-valuemax` are static and must be configured in the HTML. `aria-valuenow` is updated dynamically by the foundation when the progress value is updated in determinate progress bars.\n\n### Styles\n```scss\n@use \"@material/circular-progress/mdc-circular-progress\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport { MDCCircularProgress } from '@material/circular-progress';\n\nconst circularProgress = new MDCCircularProgress(document.querySelector('.mdc-circular-progress'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Sizing\n\nTo set the stroke-width and container size strictly to one of three sizes defined by guidelines, replace the templates with the following.\n\n#### Large (48px)\nSee [baseline template](#HTML-Structure) above.\n\n#### Medium (36px)\n```html\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n```\n\n#### Small (24px)\n```html\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n```\n### Four-Colored\n\nYou may choose to have the indicator in inderminate state animate through 4 colors. The template for the four-colored indicator is like that of the [baseline](#HTML-Structure), except the spinner layer is replicated 4 times, 1 for each color. See [Sass-Mixins](#Sass-Mixins) for how to customize the four colors.\nThis is done instead of animating the color property to reduce browser repaints.\n\n```html\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n\n
\n \n
\n\n
\n \n
\n\n
\n \n
\n
\n
\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--------- | -------------\n`mdc-circular-progress` | Mandatory. The root element.\n`mdc-circular-progress--indeterminate` | Optional. Puts the circular progress indicator in an indeterminate state. |\n`mdc-circular-progress--closed` | Optional. Hides the circular progress indicator. |\n`mdc-circular-progress__determinate-container` | Mandatory. Contains the determinate progress indicator.\n`mdc-circular-progress__indeterminate-container` | Mandatory. Contains the indeterminate progress indicator.\n`mdc-circular-progress__determinate-circle-graphic` | Mandatory. The determinate SVG.\n`mdc-circular-progress__determinate-track` | Mandatory. The determinate SVG track.\n`mdc-circular-progress__determinate-circle` | Mandatory. The determinate SVG circle.\n`mdc-circular-progress__spinner-layer` | Mandatory. Another wrapper around the indeterminate indicator.\n`mdc-circular-progress__indeterminate-circle-graphic` | Mandatory. An indeterminate SVG (there are three of these in total).\n`mdc-circular-progress__circle-clipper` | Mandatory. Clips an indeterminate SVG circle so that only a section of it is visible.\n`mdc-circular-progress__circle-left` | Mandatory. One of two circle sections that when combined are animated to form the full indeterminate progress indicator.\n`mdc-circular-progress__circle-right` | Mandatory. One of two circle sections that when combined are animated to form the full indeterminate progress indicator.\n`mdc-circular-progress__gap-patch` | Mandatory. A tiny little sliver of an SVG circle used to patch a gap between the circle-left and the circle-right.\n\n\n> _NOTE_: Ensure the correct inner SVG templates for each size are used to ensure optimal ratio of the stroke width to container size as specified in Material Design guidelines.\n\n### Sass Mixins\n\nMixin | Description\n----- | ------------\n`color($color)` | Customizes the stroke-color of the indicator. Applies to the determinate variant, and also the indeterminate variant unless the four-color mixin is applied.\n`track-color($color)` | Customizes the track color of the indicator. Applies to the determinate variant only.\n`indeterminate-colors($colors)` | Applies four animated stroke-colors to the indeterminate indicator. Applicable to the indeterminate variant only and overrides any single color currently set. Takes a list of exacty four colors.\n\n## `MDCCircularProgress` Properties and Methods\n\nProperty | Value Type | Description\n-------- | ---------- | --------------\n`determinate` | `boolean` (write-only) | Toggles the component between the determinate and indeterminate state.\n`progress` | `number` (write-only) | Sets the progress bar to this value. Value should be between 0 and 1.\n\nMethod Signature | Description |\n---------------- | ----------- |\n`open() => void` | Puts the component in the open state. |\n`close() => void` | Puts the component in the closed state. |\n\n\n## Usage within Web Frameworks\n\n### `MDCCircularProgressAdapter`\n\nMethod Signature | Description\n---------------- | -----------\n`addClass(className: string) => void` | Adds a class to the root element.\n`getDeterminateCircleAttribute(attributeName: string) => void` | Gets the specified attribute from the determinate circle element.\n`hasClass(className: string) => boolean` | Returns boolean indicating whether the root element has a given class.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`removeAttribute(attributeName: string) => void` | Removes the specified attribute from the root element.\n`setAttribute(attributeName: string, value: string) => void` | Sets the specified attribute on the root element.\n`setDeterminateCircleAttribute(attributeName: string, value: string) => void` | Sets the specified attribute on the determinate circle element.\n\n### `MDCCircularProgressFoundation`\n\nMethod Signature | Description\n---------------- | ---\n`setDeterminate(value: boolean) => void` | Toggles the component between the determinate and indeterminate state.\n`isDeterminate() => boolean` | Whether or not the component is in determinate state.\n`setProgress(value: number) => void` | Sets the progress bar to this value. Value should be between [0, 1].\n`getProgress() => number` | The current progress value in the interval [0,1].\n`open() => void` | Puts the component in the open state.\n`close() => void` | Puts the component in the closed state.\n`isClosed() => boolean` | Whether or not the progress indicator is closed.\n\n\n","gitHead":"cb4d3f1d1d37c50939ed5269748eebb96f798601","license":"MIT","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","circular-progress"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-circular-progress"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web circular progress component","directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.a80c8b2c2.0","@material/theme":"13.0.0-canary.a80c8b2c2.0","@material/animation":"13.0.0-canary.a80c8b2c2.0","@material/feature-targeting":"13.0.0-canary.a80c8b2c2.0","@material/progress-indicator":"13.0.0-canary.a80c8b2c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/circular-progress_13.0.0-canary.a80c8b2c2.0_1628121552555_0.8927318762589411","host":"s3://npm-registry-packages"},"_id":"@material/circular-progress@13.0.0-canary.a80c8b2c2.0","version":"13.0.0-canary.a80c8b2c2.0"}