SLARIVO / SPINNER LOADERS
Spinner Loaders Components
Browse 316 exact locally owned demos. Filter the collection, inspect a focused preview, and unlock its implementation prompt.
- Slarivo Spinner Loader
A circular spinning loader with configurable size, color, border width, and animation speed.
- Slarivo Animated Loader
Cool Animated Loader
- Slarivo Loader
A loading component with multiple variants to indicate processing states and provide visual feedback to users during wait times.
- Slarivo Spinner
Spinner Loaders component from the 21st.dev community.
- Slarivo Reshaped Loader
Spinner used as part of other components to enable a loading state or as a standalone element. Comes in small, medium and large sizes with responsive syntax support, primary color by default and an inherit color that follows the parent element's text color.
- Slarivo Spinner
A lightweight, customizable React spinner component with dynamic sizing and smooth staggered animation for modern UIs
- Slarivo Bars Loader
An animated bars loader with configurable count, size, gap, color, and speed for indicating loading states.
- Slarivo Spinner
A simple animated loading spinner built on the Lucide Loader2 icon.
- Slarivo Weave Spinner
A visually complex loading spinner with threads weaving around a central pulsing node
- Slarivo Loader
A simple and elegant loading spinner component with multiple sizes and color variants.
- Slarivo ai loader
A smooth, animated circular loader that gives the impression of thought, processing, or idea formation — like an AI "thinking" or "creating" something in real time.
- Slarivo Spinner
Indicate an action running in the background. Unlike the loading dots, this should generally be used to indicate loading feedback in response to a user action, like for buttons, pagination, etc.
- Slarivo Luma Spin
Luma Spin is a loader component
- Slarivo Box Loader
A sleek 3D animated loader featuring rotating cubes.
- Slarivo Dot Loader
Here is Dot Loader component
- Slarivo Loader
A loading component with multiple variants to indicate processing states and provide visual feedback to users during wait times.
- Slarivo Loader
Here is Loader component
- Slarivo Morphing Square
A customisable morphing square loader component for indicating loading states in your application. Features smooth shape transitions and optional loading messages.
- Slarivo iOS Spinner
iOS Spinner
- Slarivo Orbital Loader
A customisable orbital loader component for indicating loading states in your application. Features smooth orbital animations and optional loading messages.
- Slarivo Pulsating Loader
Here is Pulsating Loader component
- Slarivo Spinner Morph
Here is Spinner Morph component
- Slarivo Loader
A loading component with multiple variants to indicate processing states and provide visual feedback to users during wait times.
- Slarivo snow-ball-loading-spinner
An animated spinner which gives a feel like rolling snow ball.
- Slarivo Loader
A visually engaging loader with a "gooey" liquid-like animation effect, perfect for indicating loading states in a stylish way.
- Slarivo Image loading
A customizable image loader component that displays an animated grid overlay while the image loads. The grid cells blink initially, then fill with colors sampled from the image, expand to cover gaps, and fade out to reveal the final image with smooth transitions.
- Slarivo Cube Loader
A 3D cube loader built with React and CSS, featuring a glowing core, breathing translucent faces, and a smooth infinite spin, paired with minimal “Loading” microcopy for futuristic wait states.
- Slarivo Liquid Loader
Liquid loader for futuristic loading states. Features fluid-like animated blobs in vibrant gradients. Ideal for dark-themed UIs, splash screens, or playful transitions.
- Slarivo Loader
Gradient Ring Loader A sleek rotating loader with vibrant pink-to-orange gradients and reflection effect. Perfect for modern, stylish apps and creative digital products.
- Slarivo Loader
Minimalistic loader animation featuring the iconic Squid Game shapes (circle, triangle, square) outlined in bold black with a pulsating red dot. The shapes animate sequentially, creating a smooth loading effect. Ideal for entertainment, gaming, or streaming websites to build suspense and visual engagement.
- Slarivo Spinner
Here is Spinner component
- Slarivo CoreSpin Loader
Designed to fit seamlessly into dashboards, SaaS products, AI interfaces, and developer tools, CoreSpin Loader delivers a premium visual experience while remaining lightweight and performant.
- Slarivo Loader
Server Stack Loader A sleek 3D server stack animation used as a loader. Communicates speed, reliability, and tech-savvy branding while keeping users engaged during wait times.
- Slarivo Morphing Spinner
A minimal and unique loading spinner that smoothly transitions between geometric shapes.
- Slarivo Animated Loader
A reusable component for animated loader
- Slarivo 3 dots loader
sleek, minimal loader animation where three separate balls move independently at first, then merge into one and spin together — symbolizing alignment, synergy, or a process coming together.
- Slarivo Loader
Block Grid Loader – Reflective Animation Minimal loader animation using stacked green squares with a smooth gradient reflection effect. Perfect for modern dashboards, portfolio sites, or data-driven apps to provide a clean and futuristic loading experience.
- Slarivo Loader
Loader Minimal 3D stacked-block animation symbolizing structure and flow. Keeps users engaged with a sleek, modern loading experience.
- Slarivo Spinner
A loading spinner component with customizable size and color.
- Slarivo BarLoader
The BarLoader is a sleek, animated loading component for React applications, designed to provide a visually engaging feedback during data fetching or processing. It features multiple vertical bars that scale up and down in a smooth, rhythmic motion, creating a pulsating effect that draws attention without being distracting. Each bar’s height, width, color, number of bars, and animation speed are fully configurable, allowing developers to easily adapt the loader to match their application’s design and theme, including dark and light modes with Tailwind CSS. The animation is implemented using inline CSS keyframes, ensuring lightweight performance without external dependencies. Its minimal yet dynamic design makes it ideal for dashboards, landing pages, and interactive UI elements, providing a professional and modern loading experience.
- Slarivo Worm Loader
The WormLoader is a vibrant and playful loading animation that uses colorful, gradient-filled worm-like paths gliding smoothly along a curved SVG track. Its dynamic dual-worm motion—powered by SVG stroke-dasharray animations—creates a visually captivating, continuous loop that feels lively and modern. With its responsive sizing, gradient transitions, and dark/light mode adaptability, the WormLoader is perfect for splash screens, progress indicators, or fun loading states where you want to add energy and personality to your UI without compromising on performance or style.
- Slarivo Loader
Infinity Loader A smooth looping animation symbolizing endless flow and continuity. Perfect for keeping users engaged with a modern, minimal loading experience.
- Slarivo Morphing Loader
A shape-shifting loading spinner that continuously morphs between rounded and square forms while rotating and scaling.
- Slarivo Customizable Loader / Spinner / Transition
Set number of squares and speed. Pause at certain points. Scale to a size you like and have fun. Can also create cool effects such as a hero/feature or transition animations. ** Reload
- Slarivo Loader
Animated Loader A smooth, eye-catching loader with circular motion. Designed to keep users engaged while content loads. Perfect for modern apps, dashboards, and websites where subtle but stylish feedback matters.
- Slarivo Animated Spinner
The component includes all the CSS animations and custom properties inline, featuring a dynamic conic gradient that rotates and changes, along with an animated line width effect. You can customize the size by passing a `size` prop, and it maintains all the smooth animations
- Slarivo Loader
Creative pencil loader animation featuring a rotating blue pencil with eraser tip, drawing a circular progress path to indicate loading in an engaging, education-themed style.
- Slarivo Loader
This React component renders a compact and stylish animated loader using Tailwind CSS and inline keyframes. The loader starts as a square that smoothly transforms
- Slarivo Spinner
Here is Spinner component
- Slarivo Spinner
Here is Spinner component
- Slarivo Button
Enhanced shadcn/ui button
- Slarivo Infinite Slider
Infinite scrolling slider component that smoothly loops through its children. It supports both horizontal and vertical directions, with customizable speed and speed on hover. Ideal for creating continuous carousels, marquee displays, or dynamic content showcases.
- Slarivo AI Loader
ai loader background and animation
- Slarivo Message loading
Message Loading animation
- Slarivo AI Input With Loading
A chat input component with a loading state animation featuring an auto-resizing textarea, loading spinner, and status message. Features: • Loading state animation • Auto-resizing textarea • Customizable loading durations • Dark mode support • Status messages • Keyboard shortcuts • Auto-animation mode • Mobile responsiveness
- Slarivo Carousel
A customizable carousel with microinteractions and slider.
- Slarivo Spinner
Indicate an action running in the background. Unlike the loading dots, this should generally be used to indicate loading feedback in response to a user action, like for buttons, pagination, etc.
- Slarivo Animated Slideshow
- Animated hover slider
- Slarivo Loading Spinner
Loading Spinners I can't find the original developers. If you know them, please share their information in an issue.
- Slarivo Animated Feature Carousel
An animated carousel component for showcasing features with smooth transitions and interactive elements
- Slarivo Animated Gallery
Animated Gallery with scroll trigger animation
- Slarivo layout preloader
An animated image preloader with GSAP transitions, featuring sequential image reveals, smooth zoom effects, and grid-based layout animations with interactive restart functionality
- Slarivo Feature Carousel
An animated feature carousel with smooth slide transitions.
- Slarivo Preloader
he Preloader React component creates an animated loading screen using Framer Motion and React hooks. It cycles through greeting words in various languages ("Hello", "Bonjour", etc.) with a fade-in effect and a small animated dot. A morphing SVG path animates at the end, sliding up to reveal content. The component is responsive, adjusting to window size changes, and supports an optional onComplete callback triggered after the exit animation. It features a full-screen black background with centered, responsive text.
- Slarivo Image Swiper
A dynamic and interactive React image swiper component that displays images as a stack of cards with a smooth, perspective-based swipe animation. Users can swipe through images with touch or mouse gestures. Highly customizable and easy to integrate. Tinder like swipe
- Slarivo Progressive Carousel
Timelines component from the 21st.dev community.
- Slarivo Animated Loading Skeleton
Animated Loading Skeleton
- Slarivo argent-loop-infinite-slider
A high-performance, seamless infinite slider designed for luxury retail and premium product discovery. This component utilizes a "frictionless" motion logic to create an unending stream of items, reflecting a sense of boundless opportunity and "smart-work" automation. The visual architecture is optimized for high-contrast "Silver" accents—aligning with a premium metal aesthetic—and smooth, heavy-easing transitions that command user attention without being intrusive.
- Slarivo Card Fan Carousel
Animated image card carousel with a fanned arc layout. Features elastic entrance animation, interactive hover spread, and circular single-card pagination powered by GSAP. Responsive, light/dark mode ready.
- Slarivo Wave Loader
An animated loading indicator featuring vertical bars that scale up and down in a wave-like pattern to indicate loading states.
- Slarivo Bouncing Dots
An animated loading indicator featuring three bouncing dots with customizable colors and spacing.
- Slarivo Kinetic Dots Loader
A Simple Kinetic Dots Play Loader Component.
- Slarivo Animated Loading SVG + Text Shimmer
An animated loading breadcrumb component with a spinning SVG loader icon, shimmer text effect, and chevron. Perfect for indicating loading states in a visually appealing way.
- Slarivo Progressive Flux Loader
A glowing flux progress bar with phase labels that fly in letter by letter.
- Slarivo Loader
Upload Progress Loader An animated loader showing a laptop with an upward arrow, symbolizing file upload or data transfer. Creates a clear, modern, and purposeful loading indicator. Ideal for upload screens, cloud storage apps, and file-sharing platforms.
- Slarivo counter loader
A visually engaging counter animation component using CSS grid and keyframe animations.
- Slarivo Word Loader
An animated loader that cycles through a set of words, showing each with a blur-fade-in effect, then fades out before showing the next.
- Slarivo Wave Spinner
An animated loading spinner made of pulsing dots with configurable wave patterns, grid layouts, colors, sizes, and dot shapes.
- Slarivo Loading Button
A button that morphs its label through pending, success, and error states without layout shift when running an async action.
- Slarivo Spinner
A minimal loading spinner that renders an animated rotating icon, sizable and colorable via className.
- Slarivo Bars Spinner
A loading spinner with rotating bars animation.
- Slarivo Spinner
A simple animated loading spinner built on the Lucide Loader2 icon.
- Slarivo Spinner
A simple animated loading spinner built on the Lucide Loader2 icon.
- Slarivo Spiral Loader
Two-phase Lottie spiral loader for streaming agents. Self-contained port from 21st.dev Agent Elements.
- Slarivo Loader
Circular Dot Swirl Loader A smooth, animated loader made of rotating and fading dots arranged in a circular swirl pattern. Creates a modern and minimal loading effect. Ideal for dashboards, data-driven apps, and websites that require a clean, non-intrusive preloader.
- Slarivo Ripple Spinner
A loading spinner with concentric expanding circular waves that create a ripple effect.
- Slarivo Workspace Loading Spinner
A workspace launch loading state that shows a spinner with stepped status messages cycling through connection stages before revealing a ready state.
- Slarivo Arc Spinner
A circular arc loading spinner that rotates continuously to indicate an in-progress state.
- Slarivo 8-bit Spinner
Pixel-art loading spinner from 8bitcn.com — classic rotating SVG or diamond pixel-flash variant. Zero dependencies.
- Slarivo Spinner
Spinner
- Slarivo Helix Loader
An animated DNA double-helix loading spinner with dots traveling along interleaved sinusoidal paths, supporting dna, ribbon, and minimal variants.
- Slarivo Classic Spinner
A classic 12-bar rotating loading spinner that fades each bar in sequence to indicate a busy or loading state.
- Slarivo Infinity Loop
An SVG infinity-path loading spinner that animates a continuous dash for long-running or ongoing loading states.
- Slarivo Diamond Loading Spinner
An animated pixel-style diamond loading spinner with sequentially fading segments that indicate a busy or loading state.
- Slarivo Clock Ring Spinner
A clock-style loading spinner with a rotating ring and a marker arm that completes a full rotation.
- Slarivo Orbital Spinner
An animated loading spinner with a pulsing central core and an orbiting satellite dot circling a faint ring.
- Slarivo ReUI Spinner
ReUI Spinner with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo Spinner
A HeroUI spinner — a lightweight animated loading indicator for buttons, panels, and full-page states. Built on HeroUI with current/accent/success/warning/danger colors and sm/md/lg/xl sizes.
- Slarivo Orbit Loader
A loading spinner with configurable particles rotating in a circular orbit.
- Slarivo Snake Loader
A loading indicator that plays a game of snake on a dot grid — the snake hunts apples, grows, and starts over.
- Slarivo Spline Scene
A React component that integrates Spline 3D scenes. Demo component combines interactive 3D visualization with a spotlight effect and responsive text content. Features: • Lazy-loaded Spline integration • Responsive layout with flex columns • Gradient text effects • Spotlight background effect • Dark theme optimized
- Slarivo Button
Enhanced shadcn/ui button
- Slarivo Infinite Slider
Infinite scrolling slider component that smoothly loops through its children. It supports both horizontal and vertical directions, with customizable speed and speed on hover. Ideal for creating continuous carousels, marquee displays, or dynamic content showcases.
- Slarivo Interactive Selector
A visually striking, interactive React component showcasing premium camping options with smooth animations, responsive layout
- Slarivo Parallax Scrolling
Here is Parallax Scrolling component
- Slarivo Sticky Scroll
Here is Sticky Scroll component
- Slarivo Gallery Hover Carousel
This component is a dynamic, interactive gallery built with Shadcn UI and Tailwind CSS. Each card initially displays a full-background image, which smoothly shrinks to the top half on hover, revealing a text section with a title, subtitle, and arrow button. The layout is responsive, carousel-enabled, and visually engaging, perfect for showcasing content elegantly.
- Slarivo Loader
Here is Loader component
- Slarivo Loader
Here is Loader component
- Slarivo Slideshow
A full-screen image slideshow component with text overlay, navigation controls, and smooth transitions.
- Slarivo Tetris Loader
A minimalist, high-contrast Tetris-inspired loading animation built with React and TypeScript. This component delivers a clean, pure black-and-white aesthetic with full dark mode support, creating a striking visual loading experience. Key Features: Pure Monochrome Design: Exclusively uses black and white colors - no grays or intermediate shades Dark Mode Native: Seamlessly switches between black-on-white (light) and white-on-black (dark) themes Authentic Tetris Mechanics: All 7 Tetriminos with proper rotation, stacking, and line clearing Configurable Options: Size: Small (8×16), Medium (10×20), or Large (10×20 with bigger blocks) Speed: Slow (150ms), Normal (80ms), or Fast (40ms) drop rates Loading Text: Customizable message or hide completely Smooth Performance: 60fps animations using requestAnimationFrame Auto-Reset: Intelligently clears the grid when pieces stack too high
- Slarivo Offer Carousel
Offer Carousel This component provides a sleek, horizontally scrollable display for showcasing offers or featured items. It includes custom navigation arrows and smooth-scrolling functionality, with cards that animate on hover for an engaging user experience.
- Slarivo Infinite Drag + Scroll Gallery
This component is a vertically scrollable and infinitely draggable image gallery built for a seamless and interactive browsing experience. Users can scroll through content using the mouse wheel or drag the gallery freely in both directions. The gallery is designed to be smooth, responsive, and visually engaging, making it suitable for portfolios, showcases, or creative landing pages.
- Slarivo Elegant Carousel
An editorial-style image carousel with a split-panel layout — text content on the left, full-bleed imagery on the right. Features smooth cross-fade transitions, a Ken Burns zoom effect on images, auto-advancing progress indicators with per-slide labels, decorative frame corners, and touch/swipe support. Ideal for fashion lookbooks, portfolio showcases, or luxury brand storytelling.
- Slarivo Flip Links
Get your site some awwwards level link hover animation with pure css, no framer motion.
- Slarivo Smooth Scroll
Here is Smooth Scroll card
- Slarivo Interactive Scrolling Story Component
This React component creates an immersive, full-page scrolling animation designed to showcase a series of features or messages. As the user scrolls down, the content on the left smoothly transitions with a fade and slide effect, while the corresponding image on the right slides into view.
- Slarivo Interactive Accordion
A minimal accordion with numbered items featuring smooth spring animations, rotating plus-to-X icons, and progressive underline hover effects.
- Slarivo Marquee
Infinite scrolling marquee component with customizable speed and direction.
- Slarivo Feature Carousel
Here is modern feature carousel component
- Slarivo Loading Carousel
Here is Loading Carousel component
- Slarivo Scroll Hero Section
Animated Scroll keywords section with loading and scrolling animation
- Slarivo LoadingLines
The LoadingLines component is a vibrant, text-based loading animation that displays the word “Generating” with each letter glowing in sequence to create a smooth wave effect. Built using React, TypeScript, and Tailwind CSS, it combines modern styling with custom keyframe animations to produce a visually appealing loader. The letters scale slightly, glow with a white highlight, and fade in and out as they animate, giving the impression of continuous motion. Behind the text, a masked gradient made of colorful radial patterns slides back and forth, adding depth and energy to the animation. This component is lightweight, reusable, and ideal for situations such as AI-driven content generation screens, creative dashboards, or any UI that needs an engaging “in-progress” indicator to enhance the user experience.
- Slarivo Spinner
Here is Spinner component
- Slarivo Interactive Hover Button
A button with expanding dot animation, loading state with spinner, and success checkmark. Multi-state interactive component.
- Slarivo Avatar Picker
Animated avatar picker.
- Slarivo Image Cursor Trail
A unique interactive component
- Slarivo Orbiting Carousel with Animated Icons
This variation of the Orbiting Carousel adds a layer of interactivity with animated icons. Each item in the carousel not only orbits but also features its own animation, drawing attention and adding a playful touch to your UI.
- Slarivo Circle unique load
A beautiful laoding component rotate regular and changes color and loading state text with diffrent symbols.
- Slarivo Smooth Dropdown
A dropdown menu with smooth spring animations.
- Slarivo Basic
Here is basic spinning text component
- Slarivo Animated Scan Loader
A reusable React component styled with Tailwind CSS, featuring a dynamic "Scan" text effect with a futuristic scanning animation. The component includes a smooth hover color transition and animated pseudo-elements that create a glowing, moving scan line effect, ideal for loading states or interactive UI elements. Customizable and easy to integrate into any React project.
- Slarivo Loading Indicator
This React component renders a visually appealing loading indicator using CSS animations. It features customizable size, colors, spin and squeeze durations, and allows for styling customization via className props. The loader consists of two elements that rhythmically squeeze and spin, creating a dynamic loading effect.
- Slarivo Spinner
Here is Spinner component
- Slarivo Pulsating Loader
Here is Pulsating Loader component
- Slarivo Pulsating Loader
Here is Pulsating Loader component
- Slarivo RocketLoader
Acss and React loader animation featuring a rocket speeder, drifting clouds, and speed trails. Perfect for splash screens, loading states, or playful UI transitions.
- Slarivo Loader
3D Cube Loader – Geometric Animation Futuristic loader with a glowing blue 3D cube rotating above a triangular base, creating a smooth illusion of depth. Perfect for modern apps, SaaS dashboards, or tech-based websites to convey innovation and progress.
- Slarivo Spinner
Here is Spinner component
- Slarivo Spinner
Here is Spinner component
- Slarivo Loader
Here is Loader component
- Slarivo Unique Loader Components
This code implements five different loading animation components using React and the Framer Motion library. Each component features unique visual styles and animation patterns to provide diverse loading experiences for users. The animations utilize various properties like scale, skew, position, and fill to create visually engaging loaders.
- Slarivo 3d effect Loader
this is a loader with special 3d animation
- Slarivo Loader
This loader component is a gooey dots animation built with React, TypeScript, Tailwind CSS, and a small amount of custom CSS keyframes. It consists of three colorful circular dots (yellow, blue, and red) that shrink, move, and return in a loop while the entire group rotates smoothly, creating a fluid and dynamic motion. The effect is enhanced by an SVG goo filter (feGaussianBlur + feColorMatrix) that blends the dots together into a single organic shape when they overlap, giving the illusion of liquid merging and separating. The component is fully responsive, centered on the screen with Tailwind utilities, and uses modern CSS animations for performance-friendly rendering. It’s an eye-catching, reusable loader ideal for projects that need a playful, modern loading animation.
- Slarivo Loading Animation
Custom page loading animation component
- Slarivo Solar Loader
The SolarLoader is a visually stunning, interactive React loader that simulates a miniature 3D solar system. At its center is a glowing sun, surrounded by planets orbiting in realistic, circular paths, each rendered as a 3D spherical body with subtle shading, inner shadows, and reflection spots for a lifelike effect. The loader automatically adapts to dark and light themes, ensuring it fits seamlessly into any UI. A diagonal axis line passes just below the sun, visually connecting the orbits and adding depth and structure to the system. All orbits rotate smoothly using CSS animations, while the entire system features a gentle tilt and perspective to enhance the 3D illusion. Planets like Saturn include rings with gradient styling, and each orbit has configurable speed and size. This loader not only indicates loading activity but also serves as an engaging, futuristic visual centerpiece for applications, dashboards, or landing pages.
- Slarivo BouncingCirclesLoader
The Bouncing Circles Loader is a visually engaging and highly customizable React component designed to indicate loading or processing states in web applications. It consists of multiple circular elements that rhythmically expand and contract in a staggered sequence, creating a smooth bouncing animation. Each circle’s size, color, and number can be easily configured, allowing developers to match the loader to the application's theme or brand colors. Additionally, the component supports both light and dark modes through Tailwind CSS classes, ensuring consistent appearance across different UI themes. Its flexible design makes it suitable for use as a page loader, inline loader within cards or modals, and it adds a modern, dynamic feel to any interface while signaling activity to users effectively.
- Slarivo Loader Animation
Minimal center-aligned loader with rotating multi-colored spheres inside a rounded black capsule, mimicking Figma’s brand aesthetic. Ideal for design-related product splash screens or loading states.
- Slarivo Reshaped Loader
Spinner used as part of other components to enable a loading state or as a standalone element. Comes in small, medium and large sizes with responsive syntax support, primary color by default and an inherit color that follows the parent element's text color.
- Slarivo Triple Dot Spinner
A compact loading spinner of three dots rotating around a shared center, sized for buttons, badges, and table rows.
- Slarivo Input
Upgaraded shadcn/ui Input
- Slarivo Project Showcase
A minimal, list-based portfolio section with a cursor-following image preview. On hover, a smooth floating image appears and tracks your mouse using lerp-based animation.
- Slarivo Motion Footer
A high-fidelity Cinematic Scroll Reveal Footer optimized for modern SaaS and app landing pages. Built with a GSAP ScrollTrigger engine to create a smooth "curtain reveal" parallax effect. It features a built-in, physics-based Magnetic Button primitive for interactive glassmorphism pills with overshoot animations. The visual hierarchy includes a theme-adaptive animated aurora glow, dynamic grid patterns, a diagonal scrolling marquee, and giant masked typography. Fully portable in a single file, React Strict-Mode safe, and natively uses shadcn/ui and Tailwind v4 oklch tokens for automatic light/dark mode compatibility.
- Slarivo Spinner
Here is Spinner component
- Slarivo Spinner
Here is Spinner component
- Slarivo Download Progress Spinner
A compact download-progress card with an animated spinner, title, file-size details, and a cancel button.
- Slarivo Morph Loading
A modern animated loading component with gradient orbs that rotate in a smooth morphing pattern.
- Slarivo Skeleton
Use to show a placeholder while content is loading.
- Slarivo Loader
Here is Loader component
- Slarivo Wave Animation
The component accepts props for wave speed, intensity, colors, particle size, and dimensions.
- Slarivo Skeleton
Display a skeleton whilst another component is loading.
- Slarivo 3D Box Loader Animation
Component creates a sophisticated 3D loading animation
- Slarivo Bouncing Balls
Bouncing Balls with props
- Slarivo HoloCube Loader
Spinner Loaders component from the 21st.dev community.
- Slarivo Loader
Here is Loader component
- Slarivo Loading Overlay
The component animates a percentage counter from 0% to 100% over 2 seconds, then clips out the overlay and reveals the content with a smooth fade-in effect.
- Slarivo text effect
A collection of animated greeting components featuring Samsung's distinctive angular design language with geometric letterforms, spring animations, and tech-forward styling. Includes both English and Vietnamese variants with futuristic accent elements. Technical Features: Spring Animations: Variable stiffness (120-400) and damping (14-22) for realistic motion 3D Effects: RotateX and rotateY transformations for depth Geometric Design: Square line caps and miter joins for sharp, tech-forward appearance Staggered Timing: Precise animation delays for dramatic sequential reveals Color Accents: Samsung-brand blue and cyan highlights Blur Effects: Smooth focus transitions on accent elements Design Philosophy: Angular Aesthetic: Sharp corners and geometric shapes reflecting Samsung's innovation focus Tech-Forward: Futuristic elements like corner brackets and accent lines Brand Identity: Distinct from organic Apple design with bold, industrial styling Scalable: Responsive SVG design that works at any size Accessible: Semantic titles and proper motion handling Usage Examples: Landing page hero animations Brand identity presentations Loading screens with personality Interactive greeting experiences Multilingual applications Tech product launches
- Slarivo Loding
This is loading
- Slarivo Gooey Blobs Loader
An animated loading indicator of organic merging blobs that stretch and squash using an SVG gooey filter.
- Slarivo LoaderGrid
The LoaderGrid component is a lightweight, colorful loading animation built with React, TypeScript, and Tailwind CSS. It uses two absolutely positioned elements that animate their box-shadow and size to create a dynamic, rotating motion. The component starts as a small square rotated by 165 degrees, with each pseudo-element expanding and contracting while shifting the positions of its glowing colored shadows. This effect produces an eye-catching illusion of spinning lights moving around a center point. The loader is small and reusable, making it perfect for modern web applications that need a stylish yet minimal loading indicator without relying on external libraries or heavy assets.
- Slarivo Crypto Swap
The CryptoSwapComponent is a modern, interactive crypto token swapping interface designed with advanced UX motion and clean, glassmorphic visuals. It supports live token selection, real-time price conversion, animated balance updates, slippage tolerance configuration, and a secure transaction flow with state feedback (loading, success, error). The component uses framer-motion for dynamic animations, glowing hover effects based on cursor tracking, and smooth modal transitions for selecting tokens and adjusting settings. It’s ideal for DeFi dashboards, crypto wallets, or DEX frontends looking for a polished, user-friendly swap experience that feels premium and responsive.
- Slarivo honeycomb-loader
this is a honeycomb loaders and
- Slarivo LoadingBottle
The LoadingBottle component is a creative SVG-based loading animation that visually represents the outline of a bottle being “drawn” over time. It uses an SVG <path> element combined with a stroke-dasharray and stroke-dashoffset animation to create a smooth tracing effect, making it look as though the bottle is gradually filling in or coming to life. This animation loops continuously, providing an engaging and lightweight visual indicator during loading states. Its minimalistic design and vector-based implementation ensure that it scales cleanly on any screen size, making it ideal for use in modern web applications that want to add a fun, distinctive touch to their loading experience.
- Slarivo Metamorphic Loader
A loader that dynamically changes shape from a circle to a rounded square, and vice versa. Credit: https://codepen.io/gayane-gasparyan/pen/GRBvwZX This component is also available on Namer UI: https://namer-ui.netlify.app/
- Slarivo Preloader
Full-screen preloader that exits with a slide-up animation when the page is ready.
- Slarivo Floating Icons Loader
The FloatingIconsLoader component is a versatile and visually engaging React loader that animates multiple icons in a floating, staggered motion. Unlike traditional loaders, this component allows full customization: you can specify the number of icons to display, their size, and color, and even pass any React icon component to be used. Each icon follows one of three distinct animation paths, creating a dynamic and lively effect as they float, scale, and rotate smoothly across the container. Its flexible design makes it suitable for a variety of applications, from indicating loading states in dashboards and forms to adding a playful visual touch to creative websites. With full Tailwind CSS compatibility and TypeScript support, it’s easy to integrate and adapt to different themes and projects.
- Slarivo Glyph Cycle
Animated dot-matrix loader that cycles through distinct braille-like glyphs with previous-frame ghosting for a crisp, readable symbol transition.
- Slarivo Bouncy balls
The three balls bounce animation is a minimalistic animation indicator featuring three circular dots or balls that bounce sequentially in a loop.
- Slarivo File Thumbnail
A compact file preview thumbnail shell for externally generated images, loading states, and fallback states. Renders a square preview at any aspect ratio with a blur-in reveal on first image load.
- Slarivo Solar Pulse Loader
Sleek circular loader with a radiant yellow-orange glow, creating a smooth pulsing effect. Perfect for modern apps seeking a bold, high-contrast loading indicator.
- Slarivo Loading Animation
Custom loading animation component
- Slarivo Vertex Chase
A dot-matrix loading spinner where three dots chase around a triangle outline leaving short fading trails while the dots stay fixed in place.
- Slarivo Liquid Reveal
LiquidReveal is a React component that animates image loading with a dynamic liquid wipe effect. It uses SVG filters to simulate fluid distortion and waviness, creating a visually engaging reveal. Ideal for portfolios, hero sections, and immersive UI transitions.
- Slarivo Card Skeleton
A loading placeholder card with skeleton lines and a media block for content that is still fetching.
- Slarivo Arc Beacon Dot Loader
An animated dot-matrix loading spinner where a stepped beam sweeps around a circular grid with a dim opposite echo and diagonal spoke accents.
- Slarivo Spokes Loader
An animated spinning spokes loading indicator rendered as a self-contained SVG spinner.
- Slarivo Download Card
Download Card This component displays download options and visual feedback for different states like loading and success, driven by props.
- Slarivo Ripple
An animated SVG ripple loading spinner with expanding concentric circles that fade out, ideal for indicating loading or pending states.
- Slarivo Skeleton Loader
A shimmer skeleton placeholder that animates a moving highlight to indicate loading content.
- Slarivo Article Skeleton
A loading placeholder for an article preview with a hero image, title, byline, and stacked body lines.
- Slarivo Logo Trace Loader
A compact reveal pattern: a self-contained SVG loader traces your logo's outline while work is in progress, then resolves into the filled logo mark when loading completes. A short dashed segment loops around a single continuous contour; when isComplete (or loading turns false) it closes the outline and fades in the filled compound shapes, calling onDone exactly once. Configurable size, stroke width, loop and fill-fade durations; colors follow currentColor; respects reduced motion with timeout fallbacks and a stable footprint.
- Slarivo Comet Spinner
A rotating comet loading spinner with a bright head and sweeping tail for animated loading and throughput states.
- Slarivo Bouncing Dots
An animated bouncing dots loading indicator that inherits the current text color and supports a configurable number of dots.
- Slarivo Info Growing Spinner
A minimal pulsing "growing" loading spinner using a ping animation in an info (cyan) accent.
- Slarivo Dual Arc
A minimal circular loading spinner that rotates two opposing arcs to indicate progress.
- Slarivo Fade Arc
An animated SVG arc spinner with dual gradient fade for indicating loading states.
- Slarivo Kanban Board Skeleton
Animated loading placeholder that mimics a three-column kanban board with card, avatar and tag skeletons.
- Slarivo Morphing Infinity
An animated SVG loading spinner that morphs a circle into an infinity shape and back in a continuous loop.
- Slarivo Bobbing Dots
A loading indicator of dots that bounce up and down in a staggered phase, for playful in-progress states.
- Slarivo Spiral
An animated loading spinner whose dots pulse around a circular spiral path to signal a busy state.
- Slarivo Liquid Vortex Loader
An animated hexagonal dot-matrix loading indicator with a liquid swirl shimmer that ripples through the hex lattice.
- Slarivo Heart Pulse Loader
A circular dot-matrix loading animation whose center pulses with a dual-beat heartbeat cadence, radiating soft concentric waves.
- Slarivo indevuiSkeleton
Here is modern animated skeleton by indevui
- Slarivo Orb Loader
styles for the loader, including the rotation and morphing animations.
- Slarivo Morphing Blob Loader
An animated liquid blob loading spinner with organic morphing shapes, specular highlights, and metallic, iridescent, or themed color variants.
- Slarivo Concentric Ring
A layered dual-ring loading spinner with a static outer guide ring and a rotating inner segment that inherits the current text color.
- Slarivo Satellite Ring
A circular loading spinner with a satellite dot that orbits the ring edge for propagation-style loading states.
- Slarivo Clock Ring
A circular loading spinner with a rotating clock-hand tick that inherits the current text color.
- Slarivo Animated Spinner
A Motion-powered circular loading spinner with size and tone variants for buttons, cards, and async states.
- Slarivo Dot Loader Motion
A row of three dots that bounce in sequence to indicate a loading state, animated with Motion.
- Slarivo Orbit Ring
A circular loading spinner with an orbiting arc that rotates outside the base ring to indicate ongoing activity.
- Slarivo Dots Ring
A circular loading spinner made of pulsing dots arranged in a ring, with configurable dot count, dot size, and radius.
- Slarivo Twin Orbit
A compact loading spinner with two markers orbiting a center dot in a half-cycle offset for balanced circular motion.
- Slarivo Dash Ring
An animated circular dash-ring spinner SVG that indicates loading or busy states.
- Slarivo Quarter Ring
A compact quarter-arc rotating ring loading spinner for tight spaces like buttons, badges, and inline labels.
- Slarivo Bars
An animated bars loading indicator with a configurable number of wave-animated bars.
- Slarivo Infinity Track
A monospace unicode loading indicator that animates staggered block glyphs along an infinity-shaped track.
- Slarivo Hello Vietnamese Effect
An animated SVG component displaying "xin chào" (Vietnamese hello) with Samsung's bold geometric design featuring angular letterforms, diamond shapes, tech accent lines, and sophisticated spring animations Key Features to Highlight: Technical Features: Spring Animations: Variable stiffness (120-400) and damping (14-22) for realistic motion 3D Effects: RotateX and rotateY transformations for depth Geometric Design: Square line caps and miter joins for sharp, tech-forward appearance Staggered Timing: Precise animation delays for dramatic sequential reveals Color Accents: Samsung-brand blue and cyan highlights Blur Effects: Smooth focus transitions on accent elements Design Philosophy: Angular Aesthetic: Sharp corners and geometric shapes reflecting Samsung's innovation focus Tech-Forward: Futuristic elements like corner brackets and accent lines Brand Identity: Distinct from organic Apple design with bold, industrial styling Scalable: Responsive SVG design that works at any size Accessible: Semantic titles and proper motion handling Usage Examples: Landing page hero animations Brand identity presentations Loading screens with personality Interactive greeting experiences Multilingual applications Tech product launches Corporate presentations
- Slarivo Wave
An animated wave loading indicator built from bars that pulse vertically to signal a busy or loading state.
- Slarivo Reshaped Skeleton
Animated content placeholder rendered until real data is available. Mimics the default text line-height with no props, accepts width and height as unit multipliers or literal strings, supports any radius token including circular for avatar-shaped placeholders, and composes into full component layouts. Animation is disabled under reduced-motion.
- Slarivo 8-bit Skeleton
Pixel-art skeleton placeholder from 8bitcn.com — wraps shadcn/ui Skeleton with chunky pixel blocks for loading states.
- Slarivo Pulse Pair
An animated dot-matrix loading indicator whose mirrored braille dot pairs pulse from the top and bottom toward the center with a connective center-column accent.
- Slarivo Binary Bloom
Animated dot-matrix loading spinner whose binary-style opacity tiers pulse in modular steps so only a few cells peak at once, producing a crisp coded circular bloom.
- Slarivo Dots
Animated three-dot loading indicator with staggered blinking dots that inherit the current text color.
- Slarivo Pulse Dot
A pulsing dot loading indicator that scales and fades to signal an in-progress state.
- Slarivo Spinner Pixel Grid
An animated pixel-grid loading spinner with 20+ motion variants, square or circle dots, optional neon glow and rainbow hue cycling.
- Slarivo Serpent Zip
An animated dot-matrix loading indicator where a stepped snake traces a serpentine zigzag path with a soft trailing tail across a triangle-shaped grid.
- Slarivo Dot Matrix Loader
A grid of dots that animate with ripple, wave, or rain patterns to indicate a loading state.
- Slarivo Typing
An animated typing indicator with vertically bouncing dots that signals live input in chat, search, and collaborative editing surfaces.
- Slarivo IMG Reveals
LiquidReveal is a React component that animates image loading with a dynamic liquid wipe effect. It uses SVG filters to simulate fluid distortion and waviness, creating a visually engaging reveal. Ideal for portfolios, hero sections, and immersive UI transitions.
- Slarivo Flux Columns
Animated dot-matrix loader where alternating columns of dots snake up and down in opposite directions.
- Slarivo Shutter Reveal
Shutter Reveal is a React component that animates image loading using vertical shutter panels. It creates a cinematic reveal effect with customizable direction, color, timing, and easing. Ideal for portfolios, galleries, or any UI that deserves a dramatic entrance.
- Slarivo Dots Loader
An animated bouncing dots loading indicator with configurable size, count, gap, color and speed.
- Slarivo AI Loader
Working indicator in dots, bar and grid variants with an optional elapsed timer, tuned so it reads as progress rather than noise. Respects prefers-reduced-motion.
- Slarivo Great UI Terminal Loader
A retro, terminal-inspired monospace loading indicator that animates character blocks and trailing density particles in real-time.
- Slarivo Data Grid Table
Here is Data Grid Table component
- Slarivo Progress
Here is Progress component
- Slarivo Progress
Here is Progress component
- Slarivo Progress
Here is Progress component
- Slarivo Spinner
Here is Spinner component
- Slarivo Spinner
Here is Spinner component
- Slarivo Loading State
A compact pixel-grid loader with an animated wavefront, a shimmering status label, and a live elapsed timer for long-running or agent tasks.
- Slarivo Orbs Morph
Compact animated morph activity indicators for showing agent status without blocking the thread.
- Slarivo Agent Wave Loader
A loading indicator for AI agent work — a signal arcs across Claude Code, Codex, Gemini, DeepSeek and Kimi marks, lifting each as it passes. Respects prefers-reduced-motion.
- Slarivo Image Generation
An animated "generating image" placeholder that shows a shimmering label, a morphing glow inside a canvas, a prompt caption and a resolution badge while an AI image is being created.
- Slarivo Card Stack Loader
An animated, neo-brutalist card stack loader component built with Framer Motion and Tailwind CSS.
- Slarivo Orbs Helix
Compact animated helix activity indicators for showing agent status without blocking the thread.
- Slarivo Skeleton
A Skeleton component for communicating loading, processing, and waiting states, featuring skeleton, loading, placeholder, card.
- Slarivo Skeleton
Spinner Loaders component from the 21st.dev community.
- Slarivo Skeleton
Spinner Loaders component from the 21st.dev community.
- Slarivo Gauge
A Gauge component for showing task completion, loading state, and multi-step advancement, featuring gauge, progress, indicator, loading.
- Slarivo Skeleton
Skeleton loading placeholder with avatar, title, text, and media variants.
- Slarivo Skeleton
Skeleton loading placeholder with avatar, title, text, and media variants.
- Slarivo Skeleton
Skeleton loading placeholder with avatar, title, text, and media variants.
- Slarivo Spiral Loader
Two-phase Lottie spiral loader for streaming agents. Self-contained port from 21st.dev Agent Elements.
- Slarivo Progress Bar
A HeroUI progress bar for showing completion of a task — loading, uploads, multi-step flows. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an indeterminate animated state,…
- Slarivo Tetris Loader
An animated loading indicator that plays a looping game of Tetris — blocks fall, stack and clear rows in a compact grid. Use it for long waits like builds, deploys or uploads, where a plain spinner feels too dull. Columns, rows, cell size, gap and speed…
- Slarivo Orbs Ring
Compact animated ring activity indicators for showing agent status without blocking the thread.
- Slarivo Orbs Ring
Compact animated ring activity indicators for showing agent status without blocking the thread.
- Slarivo Orbs Ring
Compact animated ring activity indicators for showing agent status without blocking the thread.
- Slarivo Orbs Lens
Compact animated lens activity indicators for showing agent status without blocking the thread.
- Slarivo Orbs Lens
Compact animated lens activity indicators for showing agent status without blocking the thread.
- Slarivo Orbs Lens
Compact animated lens activity indicators for showing agent status without blocking the thread.
- Slarivo Orbs Lens
Compact animated lens activity indicators for showing agent status without blocking the thread.
- Slarivo Orbs Lens
Compact animated lens activity indicators for showing agent status without blocking the thread.
- Slarivo Orbs Morph
Compact animated morph activity indicators for showing agent status without blocking the thread.
- Slarivo Brutalist Deck Loader
A neo-brutalist card stack loader component featuring smooth auto-shuffling Framer Motion animations and an integrated progress bar.
- Slarivo Progress Bar
A HeroUI progress bar for showing completion of a task — loading, uploads, multi-step flows. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an indeterminate animated state,…
- Slarivo Progress Bar
A HeroUI progress bar for showing completion of a task — loading, uploads, multi-step flows. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an indeterminate animated state,…
- Slarivo Bash Tool
Render a command tool card. State-driven (idle / running) with optional output and an approval footer (Skip / Run). Self-contained port from 21st.dev Agent Elements with inline shimmer + dot keyframes.
- Slarivo Bash Tool
Render a command tool card. State-driven (idle / running) with optional output and an approval footer (Skip / Run). Self-contained port from 21st.dev Agent Elements with inline shimmer + dot keyframes.
- Slarivo Spinner
A HeroUI spinner — a lightweight animated loading indicator for buttons, panels, and full-page states. Built on HeroUI with current/accent/success/warning/danger colors and sm/md/lg/xl sizes.
- Slarivo Spinner
A HeroUI spinner — a lightweight animated loading indicator for buttons, panels, and full-page states. Built on HeroUI with current/accent/success/warning/danger colors and sm/md/lg/xl sizes.
- Slarivo Orbs Helix
Compact animated helix activity indicators for showing agent status without blocking the thread.
- Slarivo Orbs Morph
Compact animated morph activity indicators for showing agent status without blocking the thread.
- Slarivo Orbs Helix
Compact animated helix activity indicators for showing agent status without blocking the thread.
- Slarivo Orbs Helix
Compact animated helix activity indicators for showing agent status without blocking the thread.
- Slarivo Orbs Morph
Compact animated morph activity indicators for showing agent status without blocking the thread.
- Slarivo Orbs Morph
Compact animated morph activity indicators for showing agent status without blocking the thread.
- Slarivo Orbs Helix
Compact animated helix activity indicators for showing agent status without blocking the thread.
- Slarivo ReUI Spinner
ReUI Spinner with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Spinner
ReUI Spinner with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Spinner
ReUI Spinner with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo Quantum Cloud Loader
A sleek, multi-colored particle loading animation featuring smooth, overlapping quantum-style orbits and glowing depth effects.
- Slarivo Loading-animation
A Loading-animation component for communicating loading, processing, and waiting states, featuring loading, animated loader, animated-loader, dot particle.
- Slarivo Button
A versatile button component supporting multiple variants, sizes, icons, and a loading state.
- Slarivo Terminal Loader
A retro, terminal-inspired monospace loading indicator that animates character blocks and trailing density particles in real-time.
- Slarivo Promise Toast
A button that triggers a promise-based toast notification, cycling through loading, success, and error states as an async task resolves.
- Slarivo Swirling Spinner
An animated SVG loading spinner with a swirling stroke-dash circle that spins and morphs continuously.
- Slarivo Signal Bars Loader
An audio waveform loading indicator with configurable bars that pulse rhythmically in equalizer, waveform, or heartbeat styles.
- Slarivo Circular Progress
A composable circular progress indicator with track, range, and value text parts, supporting determinate and indeterminate states.
- Slarivo Loading circle spinner
A Motion for React loading spinner that rotates a 50px ring with a hue accent, from the official Motion examples catalog.
- Slarivo Loading jumping dots
A Motion for React loading indicator with three dots that jump in a mirrored stagger, from the official Motion examples catalog.
- Slarivo Loading pulse dots
A Motion for React loading indicator with three dots that pulse in a reverse stagger, from the official Motion examples catalog.
- Slarivo Fill text
An example of creating a text fill loading animation with Motion for React.
- Slarivo Loading overlay
An example of creating a line reveal loading animation with clipPath in Motion for React.
- Slarivo Stack Loader
Stack-to-spread image intro loader with GSAP SplitText word animations and staggered image choreography. Reveals your own content underneath once it finishes.
- Slarivo Numeric Tunnel
A Numeric Tunnel component for communicating loading, processing, and waiting states, featuring animated loader, animated-loader, loader, loading animation.
- Slarivo Spinning Circle
An animated circular loading spinner with an optional loading message positioned around it, for indicating a pending or in-progress state.
- Slarivo Progress
An animated progress bar and circular progress ring with spring-smoothed fill, optional label/helper text, tone variants, and an indeterminate loading state.
- Slarivo Runway Loader
An animated progress bar where a small airplane taxis along a runway track and takes off when it reaches 100%, useful for onboarding, file import, or deploy-pipeline loading states.
- Slarivo Pixel Arc Loader
Waiting shouldn't feel empty. A soft landscape behind an arched pixel logo that waves into place — a loader people actually remember. Preview live, paste into Cursor: https://design-layer.com/en/components/pixel-arc-loader — More motion that doesn't look…
- Slarivo Loading ripple
An example of creating a ripple loading animation with Motion for React.
- Slarivo Loading progress bar
An example of creating a progress bar loading animation with Motion for React.
- Slarivo Spinning Circle
An animated circular loading spinner with an optional loading message positioned around it, for indicating a pending or in-progress state.
- Slarivo Circular Progress
A composable circular progress indicator with track, range, and value text parts, supporting determinate and indeterminate states.
- Slarivo Circular Progress
A composable circular progress indicator with track, range, and value text parts, supporting determinate and indeterminate states.
- Slarivo Orbs Ring
Compact animated ring activity indicators for showing agent status without blocking the thread.
- Slarivo Orbs Ring
Compact animated ring activity indicators for showing agent status without blocking the thread.
- Slarivo ReUI Spinner
ReUI Spinner with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Spinner
ReUI Spinner with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Spinner
ReUI Spinner with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Spinner
ReUI Spinner with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Spinner
ReUI Spinner with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo ReUI Spinner
ReUI Spinner with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.
- Slarivo Agent Radiance Cascades
The static ten-dot Agent mark becomes a selectable loading field with capture-quality controls: every gray-to-white dot is both an HDR emitter and an occluder, feeding a jump-flooded distance field and six top-down radiance cascades.