A growing collection of simple, creative loading animations built with HTML and CSS (and later some with JavaScript).
This gallery is meant to be both a visual reference and a hands-on practice playground.

All loading animations are organized by type and difficulty level:

Loading-Animations-Gallery/
├── simple/
│   ├── circle/
│   ├── dot/
│   ├── line/
│   ├── square/
│   ├── wave/
│   ├──  loading-bar/
│   └── ......
├── medium/               ← coming soon (with some JavaScript)
├── hard/                 ← coming later
└── .devcontainer/        ← for VSCode Dev Containers

Each subfolder contains standalone .html demo files.
No build setup required — just open in your browser!

1. Clone or download this repository.
2. Open any .html file in your browser.
3. View the animation and inspect the code to learn how it works.
4. Optionally, modify it and create your own version!

git clone https://github.com/yixuanwu4/Loading-Animations-Gallery.git

You can also use the built-in .devcontainer to open the project directly in a pre-configured VSCode environment.

This is a small personal project created for learning and practicing HTML/CSS animations. If you're also exploring frontend development and want to experiment with visual effects, this might give you some ideas or a starting point.

You're very welcome to browse, reuse, or modify any part of it.

This project includes basic examples using:

• @keyframes
• transform, translate, scale
• transition and animation-delay
• layout and timing tricks (like using nth-child or staggered delays)

Each animation is kept as simple and self-contained as possible.
As I keep learning, I’ll also add more complex versions (with JavaScript) to the medium/ or hard/ folders later on.

Here are a few of the animations included:

Loader Type	Demo
Spinner
Pulsing Dot
Heartbeat Line
Wave Loader

• All animations in the simple/ folder are pure HTML + CSS.
• medium/ and hard/ folders will include JavaScript-based effects (e.g. canvas, interactive loaders).
• Animations are named clearly and grouped by type for easy browsing.

MIT