Dependency-free gallery of math-driven loading animations (rose, Lissajous, cardioid, and more) with formulas and copyable code for UI builders.
What it does
Math Curve Loaders is a dependency-free gallery of loading animations driven by mathematical curves, built with plain HTML, CSS, and JavaScript. It covers rose curves, Lissajous curves, hypotrochoids, cardioids, Cassini ovals, and Fourier-style paths, each with formula notes and copyable code.
Loading spinners are often generic, interchangeable circles. Math Curve Loaders turns the loading state into a deliberate design moment by grounding every animation in a named mathematical curve, with its formula visible and its code copyable. Builders get visual differentiation without reaching for a library.
The project is a self-contained static gallery, per the README: an index.html entry point, a style.css for layout and modal styles, and a main.js that handles the animation engine, curve definitions, and modal interactions. There is no framework, no bundler, no CDN call. Open the file, pick a curve, copy the code.
Each loader is parameterized by a mathematical formula: rose curves, Lissajous figures, hypotrochoids, cardioids, Cassini ovals, and Fourier-style paths all animate through JavaScript-driven coordinate math. Clicking any preview opens a modal that shows the formula, the rendered animation, and the code snippet, which copies to clipboard in one step. The original particle trail loader ships as a standalone original.html demo alongside the gallery.
The rendering primitive is JavaScript (Canvas or computed coordinates via main.js), not a CSS keyframe trick. That matters when evaluating browser compatibility: any modern browser running plain JS will work, but the animation relies on the script executing, so CSS-only fallback is not built in. A builder choosing between this and a pure-CSS spinner library should factor in that distinction.
The architecture is intentionally monolithic: all curve definitions live in main.js. Lifting a single curve into an existing project still means reading the whole file to find and extract the relevant parameterization. There is no npm package, no ES module export, and no per-curve standalone file (except for the original loader). That is a fair tradeoff for zero dependencies, but it is the one friction point worth knowing before you commit.
Math Curve Loaders is the right pick when your loading state needs to be both visually distinctive and mathematically legible, and when you want to ship it without adding a dependency. Compare it to loaders.wtf for breadth: loaders.wtf covers more CSS-only patterns; this project goes deeper on mathematical parameterization and formula transparency, with the code and the math shown side by side.
Features
Field notes
Reviewed Jun 26, 2026
Best for
Builder outcomes
Watch out
Tested with
Go deeper
Direct DEV.to write-up covering Math Curve Loaders' SVG/CSS/JS gallery specifics—rose, Lissajous, cardioid, hypotrochoid variants, particle trails, and modal previews.
Math Curve Loaders is a static gallery of loading animations built from mathematical curve parameterizations, using only plain HTML, CSS, and JavaScript. It includes a particle trail loader plus variants based on rose curves, Lissajous figures, hypotrochoids, cardioids, Cassini ovals, and Fourier-style paths. Each animation ships with its formula displayed and its code available to copy. There are no external dependencies and no build step.
Clone or download the repository from github.com/Paidax01/math-curve-loaders, then open index.html directly in any modern browser. No build tool, bundler, or local server is needed. To use a specific curve in your own project, open main.js, locate the curve definition you want, and copy the relevant parameterization and rendering code into your project.
The project is free and publicly available on GitHub. The README does not explicitly state a license, so builders intending commercial use should check the repository directly for any license file before shipping. There is no paid tier, no SaaS wrapper, and no dependency that carries its own license obligation.
It is best for UI projects where the loading state needs to be visually distinctive and where the team wants to understand and own the underlying math, not just import a black-box spinner. Because every animation is formula-driven and the code is copyable from the gallery modal, it suits developers and designers who treat the loader as a deliberate design element rather than an afterthought.
loaders.wtf covers a broader range of CSS-only loader patterns drawn from the wider community, making it the better pick for variety and CSS-native compatibility. Math Curve Loaders goes deeper on mathematical parameterization: it names each curve, shows its formula, and keeps all animations in a single JavaScript-driven engine. Reach for Math Curve Loaders when formula transparency and JS-powered coordinate math matter; reach for loaders.wtf when you need a CSS-only approach or maximum pattern variety.
All curve definitions live inside a single main.js file, so extracting one animation into an existing project requires reading the whole file rather than importing a module. There is no npm package and no ES module export. The animations depend on JavaScript execution, meaning there is no CSS-only fallback for environments where scripts are blocked or slow to load. No explicit license is stated in the README, which is a consideration for commercial use.
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 实现，零第三方依赖，体积极小。”
Free, MIT-licensed React loading animation registry for shadcn-style projects, copy-paste spinners, skeletons, and motion primitives.
Best for Teams building React and Tailwind CSS products that already use shadcn/ui and need consistent pending states fastOpen-source React loading animation library with 55+ dot-matrix loaders for shadcn/Tailwind projects, install in one command.
Best for React and Tailwind CSS teams who want polished, on-brand loading animations without building from scratch18 production-ready CSS transitions for web apps, plus an AI agent skill that applies them directly inside your project.
Best for Builders using AI coding tools like Cursor, Claude Code, or Copilot who want consistent, production-ready CSS transitionsWebGL glass-effect library for the web, apply realistic refraction, blur, and lighting to any HTML element with a single async init call.
Best for Portfolio heroes, product landing pages, and OS-style UI shells needing physically accurate glass effects78+ 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 overheadAnimated WebGL liquid-metal shader for React buttons and chips, one component, three presets, zero layout shifts.
Best for React devs who want a real-time WebGL metal ring on CTA buttons without a custom shader setup