MazReadingProgressBar

MazReadingProgressBar is a standalone component to display a reading progress bar

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

This component use the <Teleport /> component to move the progress bar to the top of the page. You can set the teleport-selector prop to change the target of the teleportation.

Basic usage

Look at the top of the page to see the component in action (scroll in page to inscrease progress bar width).

<template>
  <MazReadingProgressBar content-selector=".VPDoc" teleport-selector="#app" />
</template>

<script lang="ts" setup>
  import MazReadingProgressBar from 'maz-ui/components/MazReadingProgressBar'
</script>

Types

Props

export type Props = {
    /**
     * Height of the progress bar
     * @default 4px
     */
    height?: string
    /**
     * Color of the progress bar
     * @default primary
     */
    color?: Color
    /**
     * Selector of the element to teleport the progress bar
     * @default body
     */
    teleportSelector?: string
    /**
     * Selector of the element to get the height
     * @default body
     */
    contentSelector?: string
    /**
     * Offset of the progress bar
     * @default 0
     */
    offset?: number
    /**
     * Class of the progress bar
     * @default undefined
     */
    barClass?: HTMLAttributes['class']
    /**
     * Instead of using the height of the content with a selector, you can set a scroll distance
     * @default undefined
     */
    distance?: number
  }

Props & Event

Props

Prop name	Description	Type	Values	Default
height	Height of the progress bar @default 4px	string	-	'4px'
color	Color of the progress bar @default primary	Color	-	'primary'
teleportSelector	Selector of the element to teleport the progress bar @default body	string	-	'body'
contentSelector	Selector of the element to get the height @default body	string	-	'body'
offset	Offset of the progress bar @default 0	number	-	0
barClass	Class of the progress bar @default undefined	TSIndexedAccessType	-	undefined
distance	Instead of using the height of the content with a selector, you can set a scroll distance @default undefined	number	-	undefined

Events

Event name	Properties	Description
begin
complete