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

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes