Uma galeria leve de animações de carregamento baseadas em curvas matemáticas - curvas rosa, figuras de Lissajous, hipotrocoides, cardioides e muito mais - construída com HTML, CSS e JavaScript puros, com notas de fórmulas e código copiável.
O que faz
Math Curve Loaders é uma galeria de animações de carregamento sem dependências, impulsionada por curvas matemáticas e construída com HTML, CSS e JavaScript puros. Abrange curvas rosa, curvas de Lissajous, hipotrocoides, cardioides, ovais de Cassini e caminhos no estilo Fourier, cada uma com visualizações em modal, notas de fórmulas e suporte para cópia.
Math Curve Loaders é uma galeria de animações de carregamento sem dependências, impulsionada por curvas matemáticas e construída com HTML, CSS e JavaScript puros. Inclui o loader original de trilha de partículas mais uma coleção de variantes de curvas - curvas rosa, curvas de Lissajous, hipotrocoides, cardioides, ovais de Cassini e caminhos no estilo Fourier - cada uma exibida em um modal de visualização que se abre ao clicar, com notas de fórmulas por curva e trechos de código que você pode copiar. O projeto é uma exploração de como parametrizações matemáticas podem se tornar estados de carregamento expressivos na interface, mantendo-se leve: tudo se resume a alguns arquivos estáticos (index.html, style.css, main.js) que você abre diretamente no navegador.
Recursos
Notas de campo
Revisado em Jun 21, 2026
Ideal para
Resultados para quem cria
Atenção
Testado com
Custo
Gratuito e de código aberto.
Ferramentas usadas
Aprofunde-se
Direct DEV.to write-up covering Math Curve Loaders' SVG/CSS/JS gallery specifics—rose, Lissajous, cardioid, hypotrochoid variants, particle trails, and modal previews.
Uma galeria leve e sem dependências de animações de carregamento baseadas em curvas matemáticas (rosa, Lissajous, hipotrocoide, cardioide e muito mais), construída com HTML, CSS e JavaScript puros.
Sim. Cada curva possui um modal de visualização com notas de fórmulas e um trecho de código copiável, para que você possa levar a fórmula e o código para o seu próprio projeto.
Abra o index.html diretamente no navegador - não há etapa de build nem dependência.
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 实现，零第三方依赖，体积极小。”
Uma coleção de spinners, loaders e animações de carregamento para aplicações web modernas, construída com React, Next.js, shadcn/ui, Tailwind CSS e Framer Motion.
Best for Adicionar spinners e animações de carregamento rapidamenteUma biblioteca de animações de carregamento reutilizáveis no estilo dotmatrix para React e Next.js, instalável pelo registro do shadcn ou copiando o código-fonte direto da documentação.
Best for Loaders com estilo dotmatrix distintoUma coleção interativa de transições CSS reutilizáveis e prontas para copiar, incluindo redimensionamento de cards, animações de modais e menus, pop de badges e muito mais, cada uma emitindo um snippet autocontido com um guard de reduced-motion.
Best for Adicionar micro-interações refinadas sem uma biblioteca de motionUma biblioteca de efeito liquid-glass para a web, aplica refração realista de vidro, blur, aberração cromática e iluminação em qualquer elemento HTML usando shaders WebGL.
Best for Refração realista de vidro na web via 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 overheadUm efeito animado de metal líquido em WebGL para React. Envolva um botão, chip ou ícone para adicionar um anel metálico em tempo real, com presets, temas, intensidade ajustável e reflexo de proximidade opcional em elementos vizinhos.
Best for Um destaque WebGL metálico premium em botões ou ícones principais