LiquidProgress (Progreso Líquido Orbital)

Esta sección muestra una vista previa del componente LiquidProgress.

En esta guía presentamos el componente LiquidProgress, un orbe líquido con arrastre vertical para cambiar el valor.

Vista Previa

64%Upload
Click o arrastra vertical para ajustar

Código

import "@elizabthpazp/intera-ui/dist/globals.css";

import { LiquidProgress } from "@elizabthpazp/intera-ui";
import { useState } from "react";

export default function Home() {
  const [val, setVal] = useState(64);
  return <LiquidProgress value={val} onChange={setVal} size={160} label="Upload" darkMode interactive />;
}
// Clic o arrastre vertical dentro del orbe, ArrowUp/Down (+-5), touchAction none + overscroll-contain

Detalles del Componente

El componente LiquidProgress consta de:

  • Orbe (border-radius:50%) con overflow-hidden y onda líquida (motion.div y).
  • Valor 0-100 que controla la altura de la onda + text-3xl.
  • Interacción: clic/arrastre vertical + ArrowUp/Down (±5) + touchAction: none.

Propiedades

Nombre de PropTipoPor DefectoDescripción
valuenumber60 (0-100)Valor de progreso.
sizenumber160Diámetro en px (min(160px,70vw) responsivo).
labelstring"Progress"Etiqueta debajo del orbe.
interactivebooleantrueActiva arrastre/clic si es true.
onChangefunction(v)=>{}Se ejecuta con el nuevo valor.
darkModebooleanfalseActiva el estilo en modo oscuro si es true.
classNamestring""Clases adicionales combinadas vía cn().
styleCSSProperties-Estilos en línea.

Responsivo: width: min(160px,70vw), text-2xl sm:text-3xl, sin salto (span estático, no key={pct}).

Características

  • Onda líquida vía Framer Motion motion.div con transformación y.
  • overscroll-contain + touchAction: none para un arrastre móvil fluido.
  • Personalizable vía className/style.
  • Ubicación: src/components/interactive/LiquidProgress.jsx.