vue-text-loading

A text loading component for Vue.js. Uses SVG and javascript to animate a text loading with a gradient.

Live Demo

Requirements

• Vue.js ^2.0.0 (Compatible with Vue 1.0 or 2.0)
• A module bundler such as webpack or use the minified version on its own.

Installation

$ npm install --save vue-text-loading

Usage

<template>
  <text-loading
    :height="height"
    :width="width"
    :animate-time="animateTime"
    :start-color="startColor"
    :stop-color="stopColor"
    :inner-text-color="innerTextColor"
    :timing-func="timingFunc"
    :showText="showTxt"
    :text="text"
    :animateDirection="animateDirection"
  ></text-loading>
</template>

<script>
  import ProgressBar from "vue-text-loading";

  export default {
    data() {
      return {
        animateTime: 5,
        height: 300,
        width: 300,
        text: "github",
        animateDirection: "right",
        startColor: "#bbff42",
        stopColor: "#0413dc",
        innerTextColor: "#ccc",
        timingFunc: "linear",
        showTxt: false
      };
    },
    components: {
      ProgressBar
    },
    methods: {
      showLoading() {
        this.showTxt = true;
        const duration = (this.animateTime * 3 + 2) * 1000;
        setTimeout(() => {
          this.showTxt = false;
        }, duration);
      }
    }
  };
</script>

Props

Name	Default value	Description
height	100	Height of the text loading in pixels.
width	100	Width of the text loading in pixels.
text	""	Text show in loading.
showText	false	Show or hide the text loading.
startColor	#73cbfe	The color of the leading edge of the text loading gradient.
stopColor	#158efd	The secondary color of the text loading gradient.
innerStrokeColor	#ccc	Background color of the text loading.
animateDirection	right	The direction of animate.
animateTime	3	The duration time(second) of animate.
timingFunc	linear	The transition timing function to use for the CSS transition. See
transition-timing-function.

Slot

none

Dev

npm run dev

📒 ChangeLog

ChangeLog

License

The MIT License