Infinite Text Loader

A customizable animated text loader component for Vue.js applications. This component creates an elegant loading animation with text that can be styled and animated in various ways.

Installation

npm install vue-text-loader

Basic Usage

import InfiniteTextLoader from 'vue-text-loader';
import 'vue-text-loader/dist/infinite-text-loader.css'; 

<InfiniteTextLoader text="Loading..." />

Props

| Prop Name | Type | Default | Description | |-----------|------|---------|-------------| | text | String | 'LOADER' | The text to display in the loader | | viewBox | String | '0 0 400 100' | SVG viewBox dimensions | | fillColor | String | '#0066cc' | Color of the filling animation | | outlineColor | String | '#cbcbcb' | Color of the text outline | | fontSize | String | '12px' | Font size of the text | | fontWeight | String | '900' | Font weight of the text | | letterSpacing | String | '0.1em' | Spacing between letters | | fontFamily | String | 'Roboto' | Font family (automatically loaded from Google Fonts) | | animationDuration | String | '1s' | Duration of the fill animation | | animationTimingFunction | String | 'linear' | Timing function for the animation | | animationIterationCount | String | 'infinite' | Number of times to repeat the animation | | animationDirection | String | 'alternate' | Direction of the animation | | backdropColor | String | 'rgba(0, 0, 0, 0.5)' | Color of the backdrop | | backdropBlur | String | '1px' | Blur effect for the backdrop | | textAnimation | String | 'scale' | Type of text animation ('none', 'rotate', 'scale', 'translate', 'bounce') |

Text Animation Types

The component supports five different text animation types:

• none: No additional animation
• rotate: Rotates the text 360 degrees
• scale: Scales the text up and down
• translate: Moves the text horizontally
• bounce: Bounces the text vertically

Text Positioning Props

| Prop Name | Type | Default | Description | |-----------|------|---------|-------------| | textX | String | '50%' | X position of the text | | textY | String | '50%' | Y position of the text | | textDy | String | '.35em' | Text baseline adjustment | | textAnchor | String | 'middle' | Text anchor position |

Examples

Basic Loading Text

<InfiniteTextLoader 
  text="LOADING" 
  fillColor="#ff0000"
  fontSize="24px"
/>

Custom Animation with Backdrop

<InfiniteTextLoader 
  text="PLEASE WAIT"
  textAnimation="bounce"
  backdropColor="rgba(0, 0, 0, 0.7)"
  backdropBlur="3px"
  animationDuration="1.5s"
/>

Styled Text with Custom Font

<InfiniteTextLoader 
  text="PROCESSING"
  fontFamily="Montserrat"
  fontSize="32px"
  letterSpacing="0.2em"
  fillColor="#4a90e2"
  outlineColor="#2c3e50"
/>

CSS Customization

The component uses scoped CSS classes that you can target for additional customization:

• .rivaldo-loader-container: The outer container that covers the entire viewport
• .rivaldo-container: The centered container for the SVG
• .rivaldo-text: The main SVG element
• .rivaldo-text-content: The text content styling
• .rivaldo-text-fill: The animated fill effect

Notes

• The component automatically loads Google Fonts when specifying a custom fontFamily
• The loader is positioned fixed and covers the entire viewport
• All animations are CSS-based for optimal performance
• The component is responsive and will adjust to different screen sizes
• Text will automatically adjust to prevent overflow

Browser Support

This component works in all modern browsers that support SVG animations and CSS transforms. For optimal performance, use the latest versions of Chrome, Firefox, Safari, or Edge.

License

MIT