Svelte ScrollProgress

Options

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>
			
<Progress color="red" background="transparent" zIndex=9999 height="5px" position="bottom" />
		

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

Dummy Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo sem erat, quis tincidunt libero gravida ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dictum lobortis elit a consequat. Cras elementum tempor enim non pretium. Aliquam tempor fermentum tellus, fermentum aliquam felis viverra quis. Aliquam felis enim, tincidunt quis libero in, ultrices finibus ante. Sed eget nibh in orci congue vulputate. Nullam quis commodo risus. Ut cursus hendrerit odio, id elementum eros vestibulum eget. Mauris quis lacinia elit. Duis ut elit a orci pulvinar feugiat. Sed feugiat nunc ipsum, sed hendrerit nisl aliquam a. Mauris nulla sapien, auctor id porttitor at, consectetur vitae lectus. Donec lobortis arcu vel turpis tincidunt, at sollicitudin justo molestie. Praesent imperdiet bibendum libero, eget vehicula odio blandit feugiat. Etiam sem lorem, tristique quis eros vitae, porttitor porta purus. Nullam tristique egestas velit nec cursus. Quisque eu massa ut purus dictum venenatis. Aliquam aliquet posuere semper. Vivamus ac odio a purus porta malesuada id ut libero. Morbi consectetur diam in faucibus egestas. Quisque tempus quis diam in tincidunt. Vivamus blandit turpis nec semper sodales. Phasellus tempus fringilla ex, vel scelerisque libero suscipit ut. Cras laoreet lacinia orci, at dapibus arcu ultricies vel. Etiam nec laoreet tortor, ac tempus metus. Integer pretium finibus aliquet. Pellentesque rhoncus lobortis risus, vel aliquet mi ornare vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in mattis sapien. Praesent et consectetur tortor. Integer finibus ac erat id bibendum. Vestibulum in neque convallis, lobortis nibh sit amet, vehicula neque. Quisque vehicula tincidunt turpis ut hendrerit. Fusce ullamcorper consequat augue, a euismod orci vestibulum ut. Suspendisse libero leo, aliquet sit amet facilisis ut, condimentum vitae sem. Fusce semper ligula nec ligula interdum porta non ac dolor. Ut ut ligula efficitur magna pretium sagittis. Sed egestas ex tortor, ac cursus quam facilisis vel. Fusce varius blandit ipsum quis pulvinar. Vestibulum eu eros a mauris malesuada vestibulum et ut dolor. Etiam massa sapien, interdum ac dignissim vel, commodo vel neque. Nunc porttitor eros hendrerit, imperdiet mi ac, tincidunt risus. Mauris quis condimentum velit. Nam ante urna, vehicula sed tortor vitae, iaculis condimentum nibh. Suspendisse potenti. Ut volutpat molestie tellus vitae suscipit. Phasellus ut tempus sapien. Sed dictum fermentum dui, et semper enim molestie et. Ut posuere sem sit amet ligula blandit, eu tempus nulla mattis. Morbi tempor nisl nec est lacinia posuere. Fusce quis nisi ac arcu sodales sollicitudin. Curabitur rhoncus volutpat erat, vel facilisis turpis mattis eget. Aliquam erat volutpat. Aenean magna est, consequat eget consectetur egestas, tempus suscipit lectus. Aenean leo massa, tempus vitae scelerisque quis, egestas vitae nisl. Sed laoreet massa sapien, a volutpat orci cursus eget. Fusce auctor cursus venenatis. Nam quis tempus nisl, eget imperdiet nulla. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum cursus lorem sed urna molestie, sit amet feugiat orci sollicitudin. Vestibulum ac arcu ac nibh auctor dapibus at pellentesque mauris. Phasellus varius, nibh at maximus varius, sem nisl rhoncus massa, vitae scelerisque leo nibh ac tortor. Sed sollicitudin elementum efficitur. Quisque metus odio, lacinia at eleifend eu, pulvinar feugiat ligula. Aliquam consectetur, quam sit amet interdum ornare, urna enim tristique purus, id lobortis mauris nisl commodo enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;