数学曲线加载动画库

GitHub Trending2026-04-02🔗 查看原文
数学曲线加载动画库
A lightweight gallery of mathematical curve based loading animations with modal previews, formulas, and copyable code snippets.
⭐ 84💻 JavaScript
一个轻量无依赖的数学曲线加载动画库，使用纯 HTML/CSS/JS 实现。收录多种曲线示例（玫瑰曲线、利萨茹、内旋线、心形、卡西尼卵形、傅里叶风格路径等）与原始粒子轨迹。支持点击弹窗预览、每条曲线附公式与代码片段并可复制。开箱即用：直接打开 index.html 运行，适合探索用数学参数化构建富表现力的 UI 加载状态。
📄 README

Math Curve Loaders

Live Preview

A small gallery of mathematical curve based loading animations built with plain HTML, CSS, and JavaScript.

It includes:

  • the original particle trail loader
  • a collection of curve variants such as rose curves, Lissajous curves, hypotrochoids, cardioids, Cassini ovals, and Fourier-style paths
  • click-to-open modal previews
  • per-curve formula notes and code snippets
  • copy support for formula and code

    • Files

  • index.html: gallery entry
  • style.css: layout, modal, and visual styles
  • main.js: animation engine, curve definitions, modal interactions
  • original.html: standalone original loader demo
  • original.css
  • original.js

    • Run

    Open index.html directly in a browser.

    Why

    This project explores how mathematical parameterizations can become expressive UI loading states while staying lightweight and dependency-free.