Home Javascript [cobra] Reading Position Indicator for Vuejs

[cobra] Reading Position Indicator for Vuejs

Javascript webcodeflow · January 4, 2022 · Comments off

vue-cobra is a component of Vuejs that indicates the scroll position while a user is reading a page.

reading progress bar css scroll indicator for div, vertical scroll indicator css, css maintain scroll position, vue reading position indicator example

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-cobra

# NPM
$ npm install vue-cobra --save

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 application template.

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

Reading Position Indicator, vue cobra Plugin/Github