# Math Curve Loaders By **paidax01** ยท Software & Tools Dependency-free gallery of math-driven loading animations (rose, Lissajous, cardioid, and more) with formulas and copyable code for UI builders. - Source: https://paidax01.github.io/math-curve-loaders/ - Repository: https://github.com/Paidax01/math-curve-loaders - Tags: open-source, animation, loader, css, javascript, ui, no-build, math - Pricing: free - Upvotes: 0 ## Features - Gallery of loaders parameterized by named mathematical curves (rose, Lissajous, hypotrochoid, cardioid, Cassini oval, Fo - Click-to-open modal previews for each animation - Per-curve formula notes displayed alongside the animation - One-click copy for both formula and code snippet - Original particle trail loader included as a standalone demo - Zero external dependencies, plain HTML, CSS, and JavaScript only - No build step; open index.html directly in any modern browser --- ## Why it matters 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 big picture 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. ## How it works 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. ## Zoom in 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. ## Yes, but 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. ## The bottom line 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. ## FAQ ### What is Math Curve Loaders? 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. ### How do I install or use Math Curve Loaders? 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. ### Is Math Curve Loaders free or open-source? 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. ### What is Math Curve Loaders best for? 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. ### How does it compare to loaders.wtf? 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. ### What are the limitations or risks of using Math Curve Loaders? 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. --- [View on Analog](https://analoghq.ai/paidax01/software-tools/math-curve-loaders)