@material/progress-indicator
Advanced tools
The Material Components for the web interface for Progress Indicators
The MDC Progress Indicator component exposes common foundation and component interfaces for a progress indicator. Components that implement these interfaces include linear progress and circular progress. Material Design progress & activity requirements.
npm install @material/progress-indicator
MDC Progress Indicator Foundation exposes the following methods:
| Method Signature | Description |
|---|---|
setDeterminate(value: boolean) => void | Toggles the component between the determinate and indeterminate state. |
setProgress(value: number) => void | Sets the progress to this value. Value should be between [0, 1]. |
open() => void | Puts the component in the open state. |
close() => void | Puts the component in the closed state. |
MDC Progress Indicator exposes the following API:
| Method Signature | Description |
|---|---|
determinate: boolean | Whether the indicator is in the determinate or indeterminate state. |
progress: number | The current progress. Value should be between [0, 1]. |
open() => void | Puts the component in the open state. |
close() => void | Puts the component in the closed state. |
8.0.0 (2020-11-02)
[@use](https://github.com/use) (098ae32)data-mdc-dialog-initial-focus doesn't work (a0ec7e2)width: 100% to account for margin around slider track. (16c563e)indeterminate checkbox (b273afa)aria-valuetext on slider thumbs. (fd608ff)typography.baseline-top() and typography.baseline-bottom() are now private. Use typography.baseline() for containers and typography.text-baseline() for text with $top and $bottom params.mdc-select__selected-text-container span; see README for updated markupripple() => ripple-styles() in MDC checkboxripple() => ripple-styles() in MDC checkboxripple() => ripple-styles() in MDC checkbox@material/theme/csshover-label-color()) are combined into the non-stateful mixin (e.g. label-color()). The default state of the mixin can be set as normal, or a Map of states can be provided to optionally set one or more states of the mixin (e.g. label-color((hover: blue))). See the @material/theme/state package for more details.getAttr added on helper text subcomponent; adapter method setInputAttr and removeInputAttr added on main component$default-size, $stroke-width, and $container-side-length variables removed.mdc-snackbar--stacked variant will now have an additional 8pxgetTableBodyHeight() => getTableHeaderHeight() and changed return types of this method.$input-padding, $input-padding-top, $input-padding-bottom, $outlined-input-padding-top, $outlined-input-padding-bottom, $input-border-bottomgetBuffer, getPrimaryBar, setStyle removed. MDCLinearProgressAdapter method setBufferBarStyle, setPrimaryBarStyle added.getBuffer, getPrimaryBar, setStyle removed. MDCLinearProgressAdapter method setBufferBarStyle, setPrimaryBarStyle added.FAQs
The Material Components for the web interface for Progress Indicators
We found that @material/progress-indicator demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.