svelte-scrollprogress

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