Svelte Scrollprogress
A svelte component to display the current page progress on your page
Svelte ScrollProgress
Shows your scroll progress, as you scroll
Installing
- pnpm
pnpm add -D svelte-scrollprogress - npm
npm install -D svelte-scrollprogress - yarn
yarn add -D svelte-scrollprogress
Usage
Using this component is very easy. Just import it and you are good to go
<script>
import Progress from "svelte-scrollprogress";
</script>
s
<Progress color="orange" background="green" zIndex="9999" height="10px" />
Customization
This component is very customizable, almost everything can be changed
| Property | Type | Description | Default |
|---|---|---|---|
| color | String | The color of the scrollbar component. Any valid CSS background property is allowed. Including images too | tomato |
| position | String | The position of the scrollbar component. Valid values are "top", "bottom", "left" and right" | bottom |
| zIndex | Integer | The order of overlapping elements | 999 |
| height | String | The height or width of the scrollbar component. Any valid CSS size value is allowed | 5px |
| background | String | The background color of the scroll bar component. Any valid CSS background property is accepted | transparent |
Events
The component does fire some events
| Event Name | Description |
|---|---|
| change | This is called whenever the scroll value changes |
