Svelte Scrollprogress

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

Svelte ScrollProgress

Shows your scroll progress, as you scroll


  • pnpm
    pnpm add -D svelte-scrollprogress
  • npm
    npm install -D svelte-scrollprogress
  • yarn
    yarn add -D svelte-scrollprogress


Using this component is very easy. Just import it and you are good to go

    import Progress from "svelte-scrollprogress";

<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

Top categories

Loading Svelte Themes