loader-text.mdx

title	Framer Motion Text Loader
description	Learn how to create smooth, animated loading text transitions using Framer Motion in React.

import { TextLoader } from '@/components/loaders/text-loader'; import { ComponentPreview } from '@/components/component-preview';

Variant 1

Use the TextLoader component to display a loader with text messages for processes that require a bit more time to complete for better user experience.

When changing the direction="horizontal" the loader will animate the text from right to left, the defautl direction is from top to bottom.

<TextLoader
  direction="horizontal"
  messages={[
        'Preparing your experience',
        'Loading awesome content',
        'Almost there',
        'Just a moment',
        'Getting things ready',
      ]}/>