Circular Text Counter For Vue.js

A vue.js component to create a circular progress bar that represents the number of characters typed in a textarea element.

Usage:

Import the text counter component.

import Vue from 'vue';
import VueTwitterCounter from './components/VueTwitterCounter.vue';

Create a new Vue app instance.

window.app = new Vue({
  el: '#app',

  components: {
    VueTwitterCounter,
  },

  data () {
    return {
      message: '',
    };
  },

  computed: {
    message_length () {
      return this.message.length;
    },
  },
});

Default props.

/*
 * The min rest to show the warns.
 */
warnLength: {
  type: Number,
  default: 20,
},
/*
 * The length to be in danger.
 */
dangerAt: {
  type: Number,
  default: 280,
},
/*
 * The current length of whatever you want to.
 */
currentLength: {
  type: Number,
  required: true,
},
/*
 * Underlay counter color.
 */
underlay: {
  type: String,
  default: '#ccd6dd',
  validator: colorValidator,
},
/*
 * Safe color.
 */
safe: {
  type: String,
  default: '#1da1f2',
  validator: colorValidator,
},
/*
 * Warn color.
 */
warn: {
  type: String,
  default: '#ffad1f',
  validator: colorValidator,
},
/*
 * Danger color.
 */
danger: {
  type: String,
  default: '#e0245e',
  validator: colorValidator,
},
/*
 * Round progress circle edges.
 */
round: {
  type: Boolean,
  default: false,
},
/*
 * Animate the progress circle.
 */
animate: {
  type: Boolean,
  default: false,
},
/*
 * The animation speed in ms.
 */
speed: {
  type: Number,
  default: 150,
},

Preview:

Download Details:

Author: LucasLeandro1204

Live Demo: https://lucasleandro1204.github.io/vue-twitter-counter/

Download Link: https://github.com/LucasLeandro1204/vue-twitter-counter/archive/master.zip

Official Website: https://github.com/LucasLeandro1204/vue-twitter-counter

Install & Download:

# NPM
$ npm install vue-twitter-counter --save