vue-cobra

Reading Position indicator for Vuejs.

View Demo View Github

Install

npm

npm install vue-cobra --save

yarn

yarn add install vue-cobra

Usage

Default

<template>
  <div>
    <vue-cobra />
  </div>
</template>

<script>
import vueCobra from "vue-cobra";
export default {
  name: "Demo",
  components: {
    vueCobra
  }
}
</script>

With custom properties

<template>
  <div>
    <vue-cobra
      :height="10"
      :zIndex="900"
      color="#4fc08d"
      :opacity="0.5"
      position="left"
    />
  </div>
</template>

<script>
import vueCobra from "vue-cobra";

export default {
  name: "Demo",
  components: {
    vueCobra
  }
}
</script>

Register it globally

import Vue from "vue";
import vueCobra from "vue-cobra";

Vue.component("vue-cobra", vueCobra);

Options / Props

Prop Type Default value Required Description
color String #000 false Set progress bar background color
height Number 4 false Set height of progress bar
opacity Number 1 false Set opacity from 0 to 1
position String top false Define in which position the bar will be rendered. Accepts: top, bottom and left
zIndex String 1000 false Set value based on css z-index property

When position property is set, height value is used to define the tickness of the bar. This was a quick approach to ensure backward compatibility. Feel free to send a PR.

GitHub