@material/circular-progress
Advanced tools
The Material Components for the web circular progress component
@material/circular-progress is a Material Design implementation of a circular progress indicator. It provides a visual representation of the progress of a task or process, which can be either determinate or indeterminate.
Determinate Circular Progress
This feature allows you to create a determinate circular progress indicator, where the progress value is specified as a fraction between 0 and 1.
<mwc-circular-progress progress="0.5"></mwc-circular-progress>Indeterminate Circular Progress
This feature allows you to create an indeterminate circular progress indicator, which is used when the progress of a task is unknown.
<mwc-circular-progress indeterminate></mwc-circular-progress>Customizing Size and Density
This feature allows you to customize the size and density of the circular progress indicator. The `density` attribute adjusts the thickness, and the `--mdc-circular-progress-size` CSS variable sets the size.
<mwc-circular-progress density="-2" style="--mdc-circular-progress-size: 48px;"></mwc-circular-progress>react-circular-progressbar is a React component for creating circular progress bars. It offers similar functionality to @material/circular-progress but is specifically designed for React applications. It provides more customization options for the appearance of the progress bar.
nprogress is a lightweight progress bar library for web applications. While it primarily provides a linear progress bar, it can be customized to create circular progress indicators. It is less feature-rich compared to @material/circular-progress but is very lightweight and easy to use.
progressbar.js is a library for creating progress bars of various shapes, including circular. It offers extensive customization options and animations, making it more versatile than @material/circular-progress. However, it may require more effort to set up and use.
The Circular Progress component is yet to be completed, please follow the tracking issue for more information.
FAQs
The Material Components for the web circular progress component
The npm package @material/circular-progress receives a total of 631,778 weekly downloads. As such, @material/circular-progress popularity was classified as popular.
We found that @material/circular-progress 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
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.