Install with the CLI

Add Loading Screen to your Roblox project in one command. Requires Node 18+ and a Roblox project — run robloxui init first if you don't have one yet. See the docs.

bashnpx robloxui add loading-screen

First time? Start with the documentation.

Import

tsx

import { Loading Screen } from "./src/client/ui/components/loading-screen";

Usage

tsx

local LoadingScreen = require(script.Parent.LoadingScreen)
local loader = LoadingScreen.new({ stages = { "Map", "Assets", "Spawning" } })
loader.frame.Parent = screenGui
loader.service:Stage("Assets"); loader.service:SetProgress(1)

Loading Screen

TSX + LuauFree

Stage-driven async loader. LoadingService exposes a stages list with Stage()/SetProgress()/Done() and emits on change. LoadingScreen renders a gradient backdrop, LOADING title, current-stage label, animated progress fill, and rotating tips. Auto-hides when done.

by RobloxUI Team

View Source

Details

Author	RobloxUI Team
Framework	Roblox-TS + React-Luau
Category	Systems
Dependencies	@rbxts/react
Theme Tokens	colors.primary, colors.primaryLight, colors.primaryDark, colors.secondary, colors.secondaryLight, colors.secondaryDark, colors.accent, colors.accentLight, colors.accentDark, colors.bg, colors.bgSecondary, colors.bgTertiary, colors.surface, colors.border, colors.borderLight, colors.glow, colors.text, colors.textPrimary, colors.textSecondary, colors.textMuted, colors.success, colors.successLight, colors.error, colors.errorLight, colors.warning, colors.info, colors.gold, colors.goldLight, gradients.primary, gradients.gold, gradients.health, gradients.mana, gradients.purple, gradients.card, gradients.surface, gradients.surfaceLight, spacing.3xs, spacing.2xs, spacing.xs, spacing.sm, spacing.md, spacing.lg, spacing.xl, radius.sm, radius.md, radius.lg, radius.xl

Loading Screen — RobloxUI