MazReadingProgressBar

MazReadingProgressBar is a standalone component to display a reading progress bar

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).

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

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

Types

Props

export interface 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

Name	Description	Type	Required	Default
height	Height of the progress bar	string	No	'4px'
color	Color of the progress bar	MazColor	No	'primary'
teleport-selector	Selector of the element to teleport the progress bar	string	No	'body'
content-selector	Selector of the element to get the height	string	No	'body'
offset	Offset of the progress bar	number	No	0
bar-class	Class of the progress bar	Native type	No	undefined
distance	Instead of using the height of the content with a selector, you can set a scroll distance	number	No	undefined

Events

Event name	Properties	Description
begin
complete