Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@prgm/sveltekit-progress-bar
Advanced tools
Readme
A SvelteKit component that displays a progress bar when the page is loading.
This component is based on the svelte-progress-bar component for Svelte. It has been adapted to integrate with SvelteKit.
If you are looking for a standalone component, check out the original component.
Please refer to the svelte-progress-bar package for a demo.
In a SvelteKit project:
npm install --save-dev @prgm/sveltekit-progress-bar
Using pnpm
:
pnpm add --save-dev @prgm/sveltekit-progress-bar
In a SvelteKit page or layout where you would like to use the component,
for instance in the src/routes/+layout.svelte
file:
<!-- +layout.svelte -->
<script lang="ts">
import { ProgressBar } from "@prgm/sveltekit-progress-bar";
</script>
<ProgressBar color="#7F57F1" />
<!-- Or, if you're using Tailwind/Windi: -->
<ProgressBar class="text-green-500" />
<slot />
The progress bar does not have a default color, so you will need to set one. You can either set the color as a data property, as a text-
class if you're using Tailwind/WindiCSS, or override the CSS.
Svelte component:
<!-- Set the CSS color through an attribute: -->
<ProgressBar color="#0366d6" />
<!-- Or, if you're using Tailwind/Windi: -->
<ProgressBar class="text-green-500" />
If you are using some type of navbar at the top of the page, like Bootstrap's, it is likely that you will need to change the z-index to get the progress bar to appear over the navbar:
<ProgressBar color="#7F57F1" zIndex={100} />
You shouldn't need to play with these, they've been selected based on UX design expertise, but they're available if you need them:
minimum
(number, range: 0-1, default: 0.08): The starting percent width use when the bar starts. Starting at 0
doesn't usually look very good.maximum
(number, range: 0-1, default: 0.994): The maximum percent width value to use when the bar is at the end but not marked as complete. Letting the bar stay at 100% width for a while doesn't usually look very good either.intervalTime
(number, default: 700): Milliseconds to wait between incrementing bar width when using the start
(auto-increment) method.settleTime
(number, default: 700): Milliseconds to wait after the complete
method is called to hide the progress bar. Letting it sit at 100% width for a very short time makes it feel more fluid.These additional methods are available on an instantiated progress bar:
start()
: Set the width to the minimum and increment until maximum width.complete()
: Set the width to 100%
and then hide after settleTime
.reset()
: Set the width to minimum but do not start incrementing.animate()
: Start incrementing from whatever the current width is.stop()
: Stop incrementing and take no further action.setWidthRatio(ratio: number)
: Stop auto-incrementing and manually specify the width.FAQs
A Svelte progress bar that hooks to SvelteKit navigation.
The npm package @prgm/sveltekit-progress-bar receives a total of 728 weekly downloads. As such, @prgm/sveltekit-progress-bar popularity was classified as not popular.
We found that @prgm/sveltekit-progress-bar demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.