Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
@chakra-ui/progress
Advanced tools
Progress bar component for Chakra UI
Weekly downloads
Readme
The Progress component is an element that displays the progress status for a task that takes a long time or consists of several steps.
yarn add @chakra-ui/progress
# or
npm i @chakra-ui/progress
import {
Progress,
ProgressLabel,
CircularProgress,
CircularProgressLabel,
} from "@chakra-ui/progress"
<Progress value={50} />
<Progress value={50} />
Pass the color
prop to apply any color that exists in the theme to the
progress
<Progress color="pink" value={20} />
Pass the size
prop to increase the height of the progress
<Progress size="sm" value={20} />
<Progress size="lg" value={20} />
Pass the value
for the progress as undefined
to put the progress component
in the indeterminate state
<Progress margin="20px" size="xs" value={undefined} />
Pass the hasStripe
prop to have a beautiful gradient to create a striped
effect on the progress
<Progress color="green" hasStripe value={20} />
Pass the isAnimated
prop combined with the hasStrip
prop to get a
beautifully animated progress
<Progress hasStripe isAnimated value={20} />
Use the ProgressLabel
utility component to have a label for the progress
component
<Progress value={60}>
<ProgressLabel>60%</ProgressLabel>
</Progress>
<CircularProgress value={50} />
Pass the size
prop to change the size of the circular progress. You can also
pass the thickness
prop to change the thickness of the circular progress. The
thickness
prop is a fractional value whose actual value is determined by the
size
of the circular progress. In this example the circular progress will have
a thickness of 30px. 50% of size (120px) => 30px
<CircularProgress size="120px" thickness={0.5} value={60} />
Pass the color
prop to apply any color that exists in the theme
<CircularProgress color="pink" value={20} />
Use the CircularProgressLabel
utility component to have a label for the
circular progress
<CircularProgress value={60}>
<CircularProgressLabel>60%</CircularProgressLabel>
</CircularProgress>
The CircularProgress and the Spinner may seem to serve the same purpose, but
semantically, they don't. In the indeterminate
state they have the following
difference.
It is used to denote the progress of a determinate operation. Take for example an image upload operation:
CircularProgress also comes with the aria-* attributes to make its progress value accessible to screenreaders.
It is more of a “presentational” loading indicator you can use on a page or a component, while it’s loading, or before it renders. It doesn't have any semantic meaning.
To give meaning to a Spinner/loading indicator, ARIA standards require that you
mark the area of the component/page that’s loading with aria-busy=true
.
FAQs
Progress bar component for Chakra UI
The npm package @chakra-ui/progress receives a total of 425,790 weekly downloads. As such, @chakra-ui/progress popularity was classified as popular.
We found that @chakra-ui/progress demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 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
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.