Guides · · Maxwell Prehoda
10 Logo Loading Animation Ideas, and the Platform Rules That Decide Which Ones Work
The best logo loading animations are short, loopable and honest about the wait. Android recommends keeping an animated splash icon under 1,000 ms on phones, Apple tells iOS developers that the launch screen is not a branding opportunity at all, and on the web a full-screen logo that hides the page can push back your Largest Contentful Paint, which Google wants under 2.5 seconds. So the ideas that work are the ones that either finish fast, loop gracefully while real work happens, or turn the logo into the first screen instead of standing in front of it.
Below are 10 ideas grounded in how real platforms and brands do it, from Google's thinking dots to Android's splash API, plus three logo pieces we made in our Animation Studio. Where a demo appears on someone else's entry, it is our version of the idea, not their code.
1. Google's animated dots: Best for logos that double as a thinking or working state
Platform: Brand system, Google Design
When Google redesigned its identity, it gave the logo three states: the full wordmark, the compact G, and four dots that are a distilled version of the logotype. The dots are described as a dynamic, perpetually moving state of the logo that signals Google is working for you, with expressions for listening, thinking, replying, incomprehension and confirmation. Their motion follows geometric arcs on a standard set of quick easing curves.
This is the strongest logo loading idea there is: instead of a spinner next to your logo, a reduced form of the logo is the spinner. It only works if the mark can be simplified to a few shapes, which is a good test of the mark itself.
Our Shuffling Dots Loader below is a pure-CSS loader in the same family: three dots trade places like a shell game, one arcing over the top while its partner ducks under.
Watch out for: A brand state needs rules. Google's dots move on consistent paths and timing; if every team animates your mark differently, the loader stops reading as the brand.
2. Android 12 animated splash icon: Best for native Android apps with a cold-start wait
Platform: Android SplashScreen API, AndroidX compat from API 23
Since Android 12, every app launches through a system splash screen that shows the app icon, and you can animate that icon with an AnimatedVectorDrawable. The rules are specific: Google recommends not exceeding 1,000 ms on phones, a delayed start cannot exceed 166 ms, the icon canvas is 432 dp with a visible inner area of 288 dp, and users can skip the animation, so it must be comfortable to cut short. If startup takes longer than a second, the docs suggest a looping animation.
Two hooks make it a real loader rather than a decoration. `setKeepOnScreenCondition` holds the splash until your data is ready, and `setOnExitAnimationListener` lets you animate the hand-off, such as sliding the splash away, as long as you call `remove()` at the end. The docs recommend against using the optional bottom branding image.
Our Four Squares Loader below shows the kind of mark that animates well at icon size: four rounded squares orbit a shared centre while each one breathes in and out.
Watch out for: The splash only shows on cold and warm starts, never on hot starts, so do not hide onboarding or messages in it. Anything important must also exist in the app itself.
3. Apple's launch screen rule: Best for iOS apps tempted to show a branded splash
Platform: Apple Human Interface Guidelines
Apple's guidance is the most useful counterweight on this page. The HIG says a launch screen is not part of onboarding or a splash screen and is not an opportunity for artistic expression; its sole function is to make the app feel quick to launch. Design it to be nearly identical to your first screen, avoid text, and do not advertise: the launch screen isn't a branding opportunity.
Apple does leave room for a logo moment, just not there. If you need a splash screen, it suggests showing it at the beginning of onboarding, or as soon as launching completes if you have no onboarding. That is the right place for an animated logo on iOS: after launch, once, and short.
The practical idea that follows: let the first screen's own elements animate in from the launch screen's static layout, so the brand moment is the interface arriving, not a logo blocking it.
Watch out for: A launch screen that differs from the first screen causes a visible flash when the app finishes loading. Match colours, orientation and light or dark appearance exactly.
4. The PWA splash screen: Best for installed web apps on Android
Platform: Web app manifest, Chrome on Android
Installed web apps get a logo splash screen for free. Chrome automatically creates it from the `name`, `background_color` and `icons` in your web app manifest, picking the icon that best fits the device; web.dev says 192px and 512px icons cover most cases.
Treat it like Android's system splash: you do not animate it, but you can make the hand-off smooth. Set `background_color` to the colour your page paints first, then let your app shell fade or slide in from that colour so the static logo screen flows into the first view.
If you want motion after that, a small looping mark in the app shell while data loads does the job without covering content.
Watch out for: A background_color that does not match your first paint produces a jarring colour flash on every launch. Check it in light and dark mode.
5. Lottie logo loaders: Best for designer-made logo animations from After Effects
Platform: Lottie by Airbnb: Android, iOS, web, React Native
Lottie, built by Airbnb, renders After Effects animations exported as JSON with the Bodymovin plugin, on Android, iOS, the web and React Native. It is a common way for brand teams to ship a designer's logo animation into an app without rebuilding it in code, and the same file plays on every platform.
For a loader, ask the designer for three segments: an intro that builds the mark, a loop that can repeat seamlessly while you wait, and an outro that resolves into the static logo or the first screen. Play the intro once, loop the middle until your data arrives, then play the outro.
If you would rather have CSS than a JSON player, our blog post on logo reveal animations with AI walks through making one from a prompt.
Watch out for: The Lottie player is a runtime dependency, and complex After Effects files can be heavy. Check the JSON size and the frame rate on a low-end phone before shipping it on a launch path.
6. SVG line drawing, the self-drawing logo: Best for outline logos and monograms on the web
Platform: SVG + CSS, CSS-Tricks technique
The classic web logo loader is a mark that draws itself. Chris Coyier's CSS-Tricks article explains the technique: set `stroke-dasharray` to at least the length of the path, set `stroke-dashoffset` to the same value to hide it, and animate the offset to 0. `getTotalLength()` gives the exact length, and setting `pathLength` on each path keeps the numbers consistent.
For a loader, draw the outline, fill the shape once the stroke completes, and if the wait continues, let the stroke chase around the mark in a loop. It works best on monograms and outline marks; a complex filled logo needs simplified paths drawn for animation.
Our SVG Line Draw below uses `pathLength` of 1 on each shape, so the same keyframes draw any path whatever its length: here a circle, then a tick.
Watch out for: Keep the SVG inline and tiny. A loader that needs to download an external file before it can draw has lost the race with the page it is waiting for.
7. Framer Logo Preloader by Dulaj Design: Best for portfolio and agency sites built in Framer
Platform: Framer Marketplace component, paid ($15)
For no-code sites, Dulaj Design's Logo Preloader Animation is a ready-made Framer component that shows your logo as an image or text while the site loads, with several animation styles and controls for timing, speed, image size, title, font, colours and a background image or solid colour. Its listing pitches it at portfolios, SaaS pages, agency sites and client projects.
Agency and portfolio sites are where a logo preloader is most at home, because the visitor came to see the studio's craft and the first second sets the tone. Keep the logo moment short and let the hero take over.
Our Bauhaus Geometry below, made in our Animation Studio, shows the build-the-mark style that suits a preloader: a circle, square and triangle roll, drop and turn into place beside a wordmark.
Watch out for: A preloader that covers the page delays what visitors see, and web.dev's target for Largest Contentful Paint is 2.5 seconds or less. Hide it as soon as the page is ready, not after a fixed timer.
8. Our Logo Sting Shape Assembly: Best for app intros, video openers and brand moments
Platform: Motion Prompts, free prompt with video Ours
Geometric pieces fly in on arcs, accelerate into one decisive hit with a shockwave ring and a frame jolt, lock into a split-circle mark, then a wordmark unmasks. Six seconds, then a hold. It is a logo sting, the kind of thing that opens a product video or plays once after an app's first launch.
The prompt is free to copy, and in the Animation Studio you can describe your own mark, scrub the timeline, tune the hit and export MP4, GIF or HTML. Cut it down to the first second and a half and the assembly works as a launch animation too.
Watch out for: Six seconds is a sting, not a loader. Never make people watch the full version on every launch; play it once and use a short loop or nothing afterwards.
9. Our Handheld Console Boot: Best for games and playful products with a boot moment
Platform: Motion Prompts, free prompt with video Ours
A putty-coloured pocket console powers on: its logo scrolls down to a chime, then a four-shade green platformer starts and a frog hops across mossy logs as the buttons press in time. The scrolling boot logo is one of the most recognisable loading moments in gaming, because it does exactly one thing, on a fixed rhythm, and then gets out of the way.
Use the idea for games, creative tools and anything with a playful brand: a logo that moves once along a single axis, lands on a sound or a beat, and hands over to the product. The full prompt is free to copy and remake in the Animation Studio.
Watch out for: Sound on load is usually unwelcome on the web, and autoplay rules block it anyway. Keep the chime for native apps or for a user-initiated start.
10. Our Logo to UI Morph: Best for SaaS apps where the logo becomes the interface
Platform: Motion Prompts, free prompt with video Ours
A pinwheel logo of four rounded tiles spins, then its tiles stretch into an app's sidebar, toolbar, review panel and timeline; a design gets approved, and the layout folds back into the mark beside its wordmark.
This is the idea that reconciles a logo loader with Apple's advice that the launch should look like the first screen: the logo does not sit in front of the app, it turns into the app. It suits product films and launch pages, and a simplified version works as the hand-off from a loading state to a dashboard. See more logo animation examples for brand motion beyond loading.
Watch out for: Morphing a logo into real UI only works if the layout is stable. If the dashboard's shape changes per user, morph into a skeleton instead of the final content.
How to choose a logo loading animation
Match it to the wait
Under a second: a single build of the mark, like Android's recommended 1,000 ms icon animation, or no animation at all. A few seconds of real work: a seamless loop of a simplified mark, such as Google-style dots or our Four Squares Loader. Unknown waits: intro, loop and outro segments, so the logo can resolve the moment the data arrives. Never hold a logo on a fixed timer after the page is ready.
Match it to the platform
Android: animate the system splash icon with an AnimatedVectorDrawable and hand off with setOnExitAnimationListener. iOS: keep the launch screen identical to the first screen and put any logo moment after launch. Installed web apps: the manifest generates the splash, so match background_color to your first paint. Websites: a small inline SVG or CSS mark, never a heavy file the page must download first.
Match it to the brand moment
A logo loader is the first motion people see, so it sets expectations for the rest of the product. Calm brands want a slow breathe or a line that draws itself (SVG Line Draw). Playful brands can afford a hop or a boot rhythm. Product-led brands get the most from a logo that turns into the interface, like our Logo to UI Morph.
Sketch your logo loader in the Studio
Start with the simplest version of your mark: two to four shapes. Animate them into place in under a second on an ease-out, decide what a seamless loop of those shapes looks like, and decide how the loop resolves into the static logo or the first screen. Then cut everything that does not survive being watched fifty times.
Describe that sequence in our Animation Studio and Claude draws the art, choreographs the motion and lets you scrub and tune it, then export HTML, React, MP4 or GIF. For pure-CSS loaders that need no logo at all, browse our loading animation examples and the Loaders directory.
Make a logo loading animation for a mark made of four rounded squares in a 2 by 2 grid. Intro: the squares drop in one by one over 700 ms with an ease-out and a small overshoot, forming the mark. Loop: while loading, the squares orbit the centre a quarter turn every 600 ms, each breathing slightly, seamlessly repeating. Outro: when loading finishes, the squares settle into the static mark and the wordmark fades in beside it over 300 ms. Under prefers-reduced-motion, show the static mark with a gentle opacity pulse.
Common questions
How long should a logo loading animation be?
As short as the wait. Android recommends keeping an animated splash icon under 1,000 ms on phones and switching to a loop if startup takes longer. On the web, hide any logo preloader as soon as the page is ready; Google's target for Largest Contentful Paint is 2.5 seconds or less at the 75th percentile.
Should my app show a logo splash screen?
On Android, the system already shows your icon on a splash screen, and you can animate it. On iOS, Apple's guidelines say the launch screen is not a branding opportunity and should look like your first screen; if you want a logo moment, show it at the start of onboarding or right after launch. On the web, avoid covering the page with a logo unless the content genuinely needs time to prepare.
What is the difference between a launch screen and a splash screen?
Apple distinguishes them: a launch screen is a static placeholder the system shows while the app starts, designed to look like the first screen, and a splash screen is a branded graphic. Apple recommends not using the launch screen as a splash. Android 12 merges the two into one system splash screen with your app icon.
How do I make a logo draw itself with CSS?
Inline the logo as SVG with outline paths, set pathLength="1" on each path, give the stroke stroke-dasharray: 1 and stroke-dashoffset: 1, then animate the offset to 0. Fill the shapes once the stroke finishes. Chris Coyier's CSS-Tricks article explains the technique in detail.
Are logo preloaders bad for SEO?
They can hurt Core Web Vitals if they hide the main content, because Largest Contentful Paint measures when the biggest image or text block becomes visible. A preloader that stays on screen after the page is ready, or blocks rendering while it loads its own assets, delays that moment.