Reading Position Indicator – Cobra

The Cobra component lets you display a customizable reading position indicator when you scroll through the document.

How to use it:

1. Import and register the component.

import vueCobra from "vue-cobra";
export default {
  name: "Demo",
  components: {
    vueCobra
  }
}
// or
import vueCobra from "vue-cobra";
Vue.component("vue-cobra", vueCobra);

2. Create a reading position indicator in the app template.

<template>
  <div>
    <vue-cobra
      :height="4"
      :zIndex="1000"
      color="#000"
      :opacity="1"
      position="top" // or 'bottom', 'left'
    />
  </div>
</template>

Preview:

Changelog:

02/28/2021

• v1.1.4

Download Details:

Author: flowck

Live Demo: http://vue-cobra.surge.sh/

Download Link: https://github.com/flowck/vue-cobra/archive/master.zip

Official Website: https://github.com/flowck/vue-cobra

Install & Download:

# Yarn
$ yarn add vue-cobra

# NPM
$ npm install vue-cobra --save