sveltekit-top-loader

# sveltekit-top-loader A SvelteKit top loading bar component made using nprogress. ## Demo Note: you might have to throttle the network speed to see the top loader 😅 [https://sveltekit-top-loader.pages.dev/](https://sveltekit-top-loader.pages.dev/) ## Installation Using npm: ```sh npm install sveltekit-top-loader ``` ## Usage In your root `+layout.svelte` file, import the component and render it at the top. ```svelte <script lang="ts"> import { SvelteKitTopLoader } from 'sveltekit-top-loader'; </script> <div> <SvelteKitTopLoader /> <slot /> </div> ``` ## props ### color Color for the top loader. - Type: `string` - Default: `#29d` ### minimum The initial position for the top loader in percentage, 0.08 is 8%. - Type: `number` - Default: `0.08` ### trickleSpeed The increment delay speed in milliseconds. - Type: `number` - Default: `200` ### height The height for the top loader in pixel. - Type: `number` - Default: `3` ### trickle Auto increamenting behaviour for the top loader. - Type: `boolean` - Default: `true` ### showSpinner To show spinner or not. - Type: `boolean` - Default: `true` ### easing Animation settings using easing (a CSS easing string). - Type: `string` - Default: `ease` ### speed Animation speed in ms for the top loader. - Type: `number` - Default: `200` ### shadow Shadow for the top loader. You can disable it by setting it to `false`. - Type: `string | false` - Default: `0 0 10px ${color},0 0 5px ${color}` ### template Template for the top loader. - Type: `string` - Default: `<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>` ### zIndex z-index for the top loader. - Type: `number` - Default: `1600` ## Credits This library is a port of Next.js top loader. A huge thanks to the creators and contributors of [nextjs-toploader](https://github.com/TheSGJ/nextjs-toploader/) and [nprogress](https://github.com/rstacruz/nprogress).