Svelte Scrollprogress

A svelte component to display the current page progress on your page

Want a Svelte site built?

Shows your scroll progress, as you scroll

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" />

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

The component does fire some events

Event Name	Description
change	This is called whenever the scroll value changes