Scroll Progress Indicator
A visual tracker showing the user’s scroll position on a page or container.
Component source
Example
1
2
3
4
5
6
7
8
9
10
{
indicatorType = indicatorTypes.find((item) => item.value === value);
}}
>
{indicatorType.label}
{#each indicatorTypes as item}
{item.label}
{/each}
{#if indicatorType.value === 'circle'}
{
horizontal = horizontals.find((item) => item.value === value);
}}
>
{horizontal.label}
{#each horizontals as item}
{item.label}
{/each}
{/if}
{
vertical = verticals.find((item) => item.value === value);
}}
>
{vertical.label}
{#each verticals as item}
{item.label}
{/each}
{#if indicatorType.value === 'bar' && vertical.value === 'top'}
{/if}
{#each Array.from({ length: 10 }) as item, i}
{i + 1}
{/each}
Usage
// Place your content here
Custom Circle
1
2
3
4
5
6
7
8
9
10
{#each Array.from({ length: 10 }) as item, i}
{i + 1}
{/each}
Custom Bar
1
2
3
4
5
6
7
8
9
10
{#each Array.from({ length: 10 }) as item, i}
{i + 1}
{/each}