vue-cobra
A Vuejs component that indicates the position of the scroll as the user reads the page.
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.
Contributors
Acknowledgement
License
MIT © Firmino Changani
56 Aug 18, 2022
22.7k Jan 9, 2023
2 Jan 20, 2022
80.1k Dec 31, 2022
4k Dec 30, 2022
84 Nov 28, 2022
63 Dec 30, 2022
6 Jun 25, 2022
187 Jan 2, 2023
2 Jan 6, 2022
10 Oct 7, 2022
75.9k Jan 9, 2023
53k Jan 3, 2023
41.8k Jan 5, 2023
36.2k Jan 3, 2023
29.6k Jan 4, 2023
24k Jan 5, 2023