基于数学曲线的加载动画库

GitHub Trending2026-04-02🔗 查看原文
基于数学曲线的加载动画库
A lightweight gallery of mathematical curve based loading animations with modal previews, formulas, and copyable code snippets.
⭐ 80💻 JavaScript
一个用原生 HTML/CSS/JS 实现的数学曲线加载动画画廊，包含原始粒子轨迹和多种曲线（玫瑰曲线、里萨茹、下摆线/回转线、心形、卡西尼卵形、傅里叶风格等）。提供点击模态预览、每条曲线的公式与代码片段并支持复制。项目结构清晰（index.html、style.css、main.js 等），可直接在浏览器打开运行，旨在以轻量无依赖方式将数学参数化用于表现力强的加载动效。
📄 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.