Una galería ligera de animaciones de carga basadas en curvas matemáticas: curvas de rosa, figuras de Lissajous, hipotrocoides, cardioedes y más, construida en HTML, CSS y JavaScript puro con notas de fórmulas y código listo para copiar.
Qué hace
Math Curve Loaders es una galería sin dependencias de animaciones de carga impulsadas por curvas matemáticas, construida con HTML, CSS y JavaScript puro. Cubre curvas de rosa, curvas de Lissajous, hipotrocoides, cardioedes, óvalos de Cassini y trayectorias estilo Fourier, cada una con vistas previas modales, notas de fórmulas y soporte para copiar.
Math Curve Loaders es una pequeña galería sin dependencias de animaciones de carga impulsadas por curvas matemáticas, construida con HTML, CSS y JavaScript puro. Incluye el loader original de rastro de partículas junto con una colección de variantes de curvas: curvas de rosa, curvas de Lissajous, hipotrocoides, cardioedes, óvalos de Cassini y trayectorias estilo Fourier, cada una mostrada en una vista previa modal con clic para abrir, notas de fórmulas por curva y fragmentos de código que puedes copiar. El proyecto es una exploración de cómo las parametrizaciones matemáticas pueden convertirse en estados de carga expresivos para la interfaz de usuario sin perder ligereza; todo consiste en un puñado de archivos estáticos (index.html, style.css, main.js) que se abren directamente en un navegador.
Características
Notas de campo
Revisado el Jun 21, 2026
Ideal para
Resultados para creadores
Ten cuidado
Probado con
Costo
Gratuito y de código abierto.
Herramientas usadas
Profundiza
Direct DEV.to write-up covering Math Curve Loaders' SVG/CSS/JS gallery specifics—rose, Lissajous, cardioid, hypotrochoid variants, particle trails, and modal previews.
Una galería ligera y sin dependencias de animaciones de carga basadas en curvas matemáticas (rosa, Lissajous, hipotrocoide, cardioede y más), construida con HTML, CSS y JavaScript puro.
Sí. Cada curva tiene una vista previa modal con notas de fórmulas y un fragmento de código listo para copiar, para que puedas llevar la fórmula y el código a tu propio proyecto.
Abre `index.html` directamente en un navegador; no hay paso de compilación ni dependencias.
jQueryScript@jqueryscript
“Math Curve Loaders is a math-based SVG loader gallery built with plain HTML, CSS, and JavaScript. Includes: • particle trail motion • curve variants • modal previews • formula notes • copy/download HTML 👉”
Vincent | 信号＞噪音@vincentlogic
“以前做前端，为了个加载动画，要么到处找 GIF，要么自己写 CSS 写到头秃。 最近看到这个 math-curve-loaders 开源库，完全是用数学公式生成的动效。 我看了一下，玫瑰曲线、李萨如曲线这些数学图形，动效极其优雅。纯 HTML+CSS 实现，零第三方依赖，体积极小。”
Una colección de spinners, loaders y animaciones de carga para aplicaciones web modernas, construida con React, Next.js, shadcn/ui, Tailwind CSS y Framer Motion.
Best for Añadir spinners y animaciones de carga rápidamenteUna biblioteca de animaciones de carga reutilizables en estilo dotmatrix para React y Next.js, instalable a través del registro de shadcn o copiando el código fuente directamente desde la documentación.
Best for Loaders con el distintivo estilo dotmatrixUna colección interactiva de transiciones CSS reutilizables y listas para copiar: redimensionado de tarjetas, animaciones de modales y menús, aparición de insignias y más, cada una con un fragmento autocontenido que incluye una protección para movimiento reducido.
Best for Añadir microinteracciones pulidas sin una biblioteca de movimientoUna biblioteca de efecto liquid-glass para la web: aplica refracción de vidrio realista, desenfoque, aberración cromática e iluminación a cualquier elemento HTML mediante shaders WebGL.
Best for Refracción de vidrio realista en la web mediante WebGL78+ animated shadcn/ui components plus 100+ AI agent patterns, distributed as copy-paste source, free, open-source, and zero npm lock-in.
Best for React and Tailwind teams already using shadcn/ui who want animated, accessible components without npm package overheadUn efecto animado de metal líquido con WebGL para React; envuelve un botón, chip o icono para darle un anillo de metal en tiempo real, con presets, tematización, intensidad ajustable y reflejo de proximidad opcional en elementos vecinos.
Best for Un acento de metal WebGL premium en botones o iconos clave