slidev-component-progress

Progress component for Slidev Slidev.
Shows a progress bar that represents the completed percentage of the presentation.

Installation

npm i slidev-component-progress

Configuration

Define this package into your slidev addons.

In your slides metadata (using frontmatter):

---
addons:
  - slidev-component-progress
---

Or in your package.json:

{
  "slidev": {
    "addons": [
      "slidev-component-progress"
    ]
  }
}

Usage

Create a ./global-top.vue file in your Slidev project and use the component:

<template>
  <Progress level="2"/>
</template>

Components

Progress

Component that displays the slides progress:

<Progress level="2"/>

Parameters:

• activeColor (type: string, default: '#ffffff' (light) or '#000000' (dark)): The color of the active item
• barColor (type: string): The color of the progress bar, by default, it will use the --slidev-theme-primary CSS variable
• height (type: string): Height of the progress bar, by default it is the minimum possible height depending of the level
• level (type: number | string, default: 1): Title level to show in the progress bar with informations from the Table Of Content
• opacity (type: number | string, default: 0.5): Opacity of the progress bar when not hovered
• position (type: 'top' | bottom', default: 'top'): Position of the progress bar in the slide
• strokeColor (type: string, default: '#000000'(light) or '#ffffff' (dark)): The stroke color for the items
• thickness (type: string, default: 2px)
• transitionDuration (type: string, default: 200ms): CSS transition durations