Reusable Vue Scroll Progress Bar

Reusable Vue Scroll Progress Bar for Vue 3

Introduction

This is a simple and easy-to-use scroll progress bar for Vue 3.

Installation 

npm install reusable-vue-scroll-progress-bar

Usage 

<template>
  <scroll-progress-bar />
</template>

Props

IdTypeDefaultDescription
containerStyleString'width: 100%; top: 0; left: 0; position: fixed;'Style attribute of the outer container
heightNumber5Height of the progress bar
colorString'#42b883'Color of the progress bar

Examples




Default: 

<template>
  <scroll-progress-bar />
</template>

Red: 

<template>
  <scroll-progress-bar color="red" :height="20" />
</template>

Custom: 

<template>
  <scroll-progress-bar v-slot="{width}">
    <div :width="width" class="custom-style">
      <img class="custom-image" src="./assets/cat.png" />
    </div>
  </scroll-progress-bar>
</template>

Using scoped slots like in the example above allows you to have full control over how the progress bar should look like.