Loading Carousel

Docs

Loading Carousel

An animated carousel component with loading indicators and customizable display options.

Open in v0

Default LoadingCarousel

Visual representation for tip: Backend snippets. Shadcn style headless components.. but for your backend.

Visual representation for tip: Create your first directory app today. AI batch scripts to process 100s of urls in seconds.

Visual representation for tip: Cult landing page template. Framer motion, shadcn, and tailwind.

Visual representation for tip: Vector embeddings, semantic search, and chat based vector retrieval on easy mode.

Visual representation for tip: SEO analysis app. Scraping, analysis, insights, and AI recommendations.

Backend snippets. Shadcn style headless components.. but for your backend.

Wide Aspect Ratio with Top Text

Backend snippets. Shadcn style headless components.. but for your backend.

Background Tips + Gradient

Backend snippets. Shadcn style headless components.. but for your backend.

Create your first directory app today. AI batch scripts to process 100s of urls in seconds.

Cult landing page template. Framer motion, shadcn, and tailwind.

Vector embeddings, semantic search, and chat based vector retrieval on easy mode.

SEO analysis app. Scraping, analysis, insights, and AI recommendations.

Tip 1/5

Custom Interval and Navigation

Backend snippets. Shadcn style headless components.. but for your backend.

Shuffled Tips with Custom Interval

Cult landing page template. Framer motion, shadcn, and tailwind.

Square Aspect Ratio with Background Tips

Backend snippets. Shadcn style headless components.. but for your backend.

Create your first directory app today. AI batch scripts to process 100s of urls in seconds.

Cult landing page template. Framer motion, shadcn, and tailwind.

Vector embeddings, semantic search, and chat based vector retrieval on easy mode.

SEO analysis app. Scraping, analysis, insights, and AI recommendations.

Tip 1/5

"use client"
 
import React from "react"
 
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 
import { LoadingCarousel } from "../ui/loading-carousel"
 
export function LoadingCarouselDemo() {
  return (
    <div className="space-y-8 p-4 w-full">
      <div className="w-full">
        <CardHeader>
          <CardTitle>Default LoadingCarousel</CardTitle>
        </CardHeader>
        <CardContent>
          <LoadingCarousel />
        </CardContent>
      </div>
 
      <div className="w-full">
        <CardHeader>
          <CardTitle>Wide Aspect Ratio with Top Text</CardTitle>
        </CardHeader>
        <CardContent>
          <LoadingCarousel
            aspectRatio="wide"
            textPosition="top"
            showIndicators={false}
          />
        </CardContent>
      </div>
 
      <div className="w-full">
        <CardHeader>
          <CardTitle>Background Tips + Gradient</CardTitle>
        </CardHeader>
        <CardContent>
          <LoadingCarousel
            aspectRatio="wide"
            backgroundTips={true}
            backgroundGradient={true}
          />
        </CardContent>
      </div>
 
      <div className="w-full">
        <CardHeader>
          <CardTitle>Custom Interval and Navigation</CardTitle>
        </CardHeader>
        <CardContent>
          <LoadingCarousel autoplayInterval={2000} showNavigation={true} />
        </CardContent>
      </div>
 
      <div className="w-full">
        <CardHeader>
          <CardTitle>Shuffled Tips with Custom Interval</CardTitle>
        </CardHeader>
        <CardContent>
          <LoadingCarousel
            shuffleTips={true}
            autoplayInterval={3000}
            showProgress={false}
          />
        </CardContent>
      </div>
 
      <div className="w-full">
        <CardHeader>
          <CardTitle>Square Aspect Ratio with Background Tips</CardTitle>
        </CardHeader>
        <CardContent>
          <LoadingCarousel
            aspectRatio="square"
            backgroundTips={true}
            backgroundGradient={true}
          />
        </CardContent>
      </div>
    </div>
  )
}

Installation

npx shadcn@latest add https://cult-ui.com/r/loading-carousel.json

Usage

import { LoadingCarousel } from "@/components/ui/loading-carousel"

export default function LoadingCarouselDemo() {
  return <LoadingCarousel />
}

Props

Prop	Type	Default	Description
tips	`Tip[]`	`defaultTips`	Array of tips to display in the carousel
autoplayInterval	`number`	`4000`	Time in milliseconds between slides
showNavigation	`boolean`	`false`	Show previous/next navigation buttons
showIndicators	`boolean`	`true`	Show slide indicator dots
showProgress	`boolean`	`true`	Show progress bar for current slide
aspectRatio	`"video" \| "square" \| "wide"`	`"video"`	Aspect ratio of the carousel
textPosition	`"top" \| "bottom"`	`"bottom"`	Position of the tip text
onTipChange	`(index: number) => void`	-	Callback function when tip changes
backgroundTips	`boolean`	`false`	Show tips on the image background
backgroundGradient	`boolean`	`false`	Show gradient overlay on background
shuffleTips	`boolean`	`false`	Randomly shuffle the order of tips

Examples

Default

<LoadingCarousel />

<LoadingCarousel autoplayInterval={2000} showNavigation={true} />

Square Aspect Ratio with Background Tips

<LoadingCarousel
  aspectRatio="square"
  backgroundTips={true}
  backgroundGradient={true}
/>

Wide Aspect Ratio with Top Text

<LoadingCarousel aspectRatio="wide" textPosition="top" showIndicators={false} />

Shuffled Tips

<LoadingCarousel
  shuffleTips={true}
  autoplayInterval={3000}
  showProgress={false}
/>

Intro Disclosure Direction Aware Tabs