UltraKit
Premium widgets for Elementor
0%
ULTRAKIT · WIDGET #98

A full-screen splash, a slim top progress bar, or an inline loading state. 17 loaders — including the animated UltraKit “U” in 8 styles and your own logo in 6 — 4 layouts, 6 backgrounds and 10 exit effects. You just saw the big U when this page opened.

Replay the page preloader Browse all widgets
UltraKit
Liquid U · editorial layout
0%
THE ULTRAKIT “U” · 8 STYLES

Built from the same SVG as the UltraKit header logo — pick how it moves, recolour its gradient and spark, and set its size up to 420px.

drawprogressliquidorbitneonbouncesplit3D fliphalo ringglow
DrawThe stroke draws itself, the spark pops in. A calm splash for a SaaS launch page.
0%
ProgressThe U fills as the page really loads — images counted, not guessed.
0%
LiquidA wave rises inside the U. Playful for a drinks brand or a fun app.
OrbitA light travels along the U. Good for tech and developer tools.
NeonGlowing, flickering sign. Night-life, gaming and music sites.
BounceThe spark drops, the U squishes — the same move as our header logo.
SplitTwo halves swing in and lock together. “Coming together” for agencies.
FlipA crisp 3D turn. Works well for a product reveal.
YOUR BRAND · LOGO LOADER

Upload any logo (SVG or PNG) and choose one of six animations. The brands below are fictional examples.

color fillshinepulsefloatringheartbeatreal progress
Color fillKivora (fictional app): the grey logo fills with color as the page loads.
Shine sweepBrightmoor (fictional bank): a light sweep across the mark — polished, not playful.
PulseLumora (fictional skincare): a soft breathing pulse.
FloatOrbitly (fictional travel site): the logo floats gently.
Inside a ringNordhaven (fictional outdoor shop): classic spinner around the logo.
HeartbeatFernwell (fictional clinic): a calm double beat.
CLASSIC LOADERS · 15 MORE

Every loader takes your two accent colors and a size. Here each one is matched to a site it suits.

ringdualdotsbarspulseorbitflipcube gridwaveinfinityhelixsegmentsprogresscountertext
PortfolioSpinning ring — neutral, works anywhere.
Creative agencyDual ring turning both ways.
Chat appBouncing dots, like someone typing.
Music & podcastsEqualizer bars that bounce to a beat.
Health clinicA soft pulse — calm and reassuring.
Space-tech startupPlanets orbiting a glowing core.
Game studioA tile flipping in 3D.
SaaS dashboardA cube grid, like data loading in.
Surf & travelDots rolling like a wave.
FintechAn endless loop of light.
Science labA turning DNA helix.
Mobile appThe familiar segment spinner.
Preparing your lesson…
Online courseA clear progress bar with a message.
PhotographerA big counting number, nothing else.
Fashion labelYour name, letter by letter.
EXITS × BACKGROUNDS

Ten exit effects and six backgrounds — solid, gradient, animated gradient, aurora glow, dot grid and starfield. Each card replays so you can watch the exit.

fadeslide upslide downzoomfly throughcirclediagonalcurtain ×2blinds
Fade outBackground: solid.
Slide upBackground: gradient.
Slide downBackground: aurora.
Zoom outBackground: grid.
Fly throughBackground: stars.
Circle revealBackground: animated.
Diagonal wipeBackground: aurora.
Curtain — sidewaysBackground: gradient.
Curtain — up/downBackground: grid.
BlindsBackground: animated.
LAYOUTS · REAL SITES

Centered stack, split, minimal and editorial — each with brand text, tagline, rotating messages and a percent or bar. All businesses below are fictional.

stacksplitminimaleditorialrotating messagespercentthin bar
Wood-fired since 1998
Centered stack · restaurantMamma Rosa (fictional trattoria): U-free brand loader with rotating messages.
Tessaly Partners
Strategy that ships
0%
Split · consultancyTessaly (fictional consultancy): logo mark beside the text, calm and corporate.
Quillo Studio
Photography
Minimal · photographerQuillo Studio (fictional): just the loader, a thin bar and the name at the bottom.
Pinecrest
Architecture & interiors
0%
Editorial · architecture studioPinecrest Architects (fictional): name top-left, huge counter bottom-right.
BEHAVIOR

The details that keep a preloader from getting in the way.

real progresssafety closeonce per sessionskiptransitionstop barreduced motion
📶
Real progress
The percent follows page images that have actually finished loading — no fake timers.
⏱
Minimum & safety time
Stays long enough to be seen, and always closes after the safety time — even if a script fails.
🔁
Once per session
Show the splash on the first page only, not on every click.
⏭
Skip button
A polite “Skip” appears after a few seconds for impatient visitors.
↪
Page-leave transition
The loader fades back in when someone clicks to another page on your site.
▔
Top progress bar
Prefer something subtle? A slim gradient bar at the top of the page instead.
♿
Reduced motion
Visitors who ask for less motion get a simple fade.
▶
Replay link
Any link to #ulp-replay replays it — like the button at the top of this page.

Brand names and logos on this page (Kivora, Brightmoor, Mamma Rosa, Tessaly, Quillo, Pinecrest and others) are fictional examples.

201 premium elements, Preloader included.

Explore All Demos Browse All Widgets