Todos os componentes

Scroll Progress Bar

Scroll Progress Bar é um componente de marquee para React e Tailwind CSS, da biblioteca Motion Primitives, com licença MIT. Copia e cola no teu projeto.

Motion Primitives MIT marquee

O que é

Scroll Progress Bar é um componente de marquee para React e Tailwind CSS, da biblioteca Motion Primitives, com licença MIT. Copia e cola no teu projeto.

Como usar

Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.

Abrir no catálogo

Cinco cópias grátis por mês. Sem cartão.

Não precisa de pacotes além do que o projeto já tem

Licença

Este componente vem de Motion Primitives e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Scroll Progress Bar

app/docs/scroll-progress/scroll-progress-basic-2.tsx

'use client';
import { useRef } from 'react';
import { ScrollProgress } from '@/components/core/scroll-progress';

const dummyContent = Array.from({ length: 10 }, (_, i) => (
  <p key={i} className='pb-4 font-mono text-sm text-zinc-500'>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam
    lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra
    nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget
    libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut
    porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies
    a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
));

export function ScrollProgressBasic2() {
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <div className='h-[350px] overflow-auto px-8 pb-4 pt-16' ref={containerRef}>
      <div className='border-zin-500 absolute left-0 top-0 z-10 h-10 w-full bg-white dark:bg-zinc-950'>
        <ScrollProgress
          className='absolute top-0 h-10 bg-zinc-200 dark:bg-zinc-800'
          containerRef={containerRef}
        />
        <div className='absolute left-0 top-0 flex h-10 items-center space-x-6 px-8 font-[450]'>
          <a
            href='#'
            className='text-zinc-700 hover:text-zinc-950 dark:text-zinc-300 dark:hover:text-white'
          >
            Magazine
          </a>
          <a
            href='#'
            className='text-zinc-700 hover:text-zinc-950 dark:text-zinc-300 dark:hover:text-white'
          >
            Blog
          </a>
          <a
            href='#'
            className='text-zinc-700 hover:text-zinc-950 dark:text-zinc-300 dark:hover:text-white'
          >
            About
          </a>
        </div>
      </div>
      {dummyContent}
    </div>
  );
}

Componentes parecidos