---
title: "Mahjong Grid Loading — Free Framer component · Best of Framer"
description: "Free Framer component · by 7th Muse · Loaders. A tile-based loading animation."
canonical: "https://framer.elliotli.dev/component/mahjong-grid-loading"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/Mahjong Grid Loading

# Mahjong Grid Loading

A tile-based loading animation.

[View on Framer](https://framer.com/marketplace/components/mahjong-grid-loading/?via=elliot-li)

![Mahjong Grid Loading preview image 1](https://framer.elliotli.dev/og/component/mahjong-grid-loading/f9047048bbe33fea/1600x1200.jpg)

## Summary

A tile-based loading animation.

## Description

Mahjong Preloader is a premium loading screen component built around the visual language of a Mahjong game viewed from directly above. A tight grid of tiles sits on a dark background — and one by one, a single tile lifts off the surface, glides down its column, and knocks the tile at the bottom row out of place before settling in. The cycle repeats, giving your loading state a calm, purposeful rhythm.

The component is built entirely with Framer Motion and requires no external dependencies. It works as a full-screen overlay loader, an inline section transition, or a decorative loading indicator. Every visual detail is controllable — tile color, background, glow, grid dimensions, easing, duration, and stagger — so it adapts cleanly to any design system or brand palette.

Drop it into your Framer project, connect a progress prop to your actual load state, or let it loop freely as a standalone animation.

## Rank history [How rankings work →](/terms#rankings)

-   All · #5593

## Details

- **Author**: 7th Muse
- **Published**: 2026-04-10
- **Updated**: 2026-04-10
- **Added**: 2026-04-01
- **Categories**: Loaders

## More like this

-   [Preloader Pro V4](/component/preloader-pro-v4) — Interface Studio · $12 — Your Website, Beautifully Unveiled
-   [Circleloader](/component/circleloader) — gustavwf · $5 — Circular logo reveal loader.
-   [AI Text Loading](/component/ai-text-loading) — Syauqizaidan Khairan Khalaf · $5 — Thinking phrases with a shimmer
-   [Preloader Pro V3](/component/preloader-pro-v3) — Interface Studio · $10 — Set the Stage Before the Story