There are three ways to add a loading animation in Framer: build one on the canvas with variants and a loop transition, buy a component from the marketplace, or embed a loader you already have as code. Which one is right depends on what the animation is for and how much of it you want to own.
One scope note before the detail. This guide covers loading animations inside the page: spinners, section loaders, the motion that sits where content is still arriving. If you want the full-screen animation that plays once while the site itself loads, that is a preloader, and it has its own trap (playing on every navigation) and its own guide: how to add a custom preloader in Framer.
The short version
- Decide whether to build the motion in Framer, buy it from the marketplace, or embed your own.
- To build: draw the shape, wrap it in a component, animate between variants with a looping transition.
- To embed: paste a self-contained HTML snippet into an embed element, or write a code component in React.
- Size the frame to the loader and place it where the waiting actually happens.
- Check the loop closes without a visible jump, and that it respects reduced-motion settings.
Build, buy, or embed
Building in Framer means drawing the loader on the canvas and animating it with variants: one variant holds the resting state, another holds the rotated or shifted state, and a looping transition plays the difference forever. It is genuinely no-code and fine for a simple spin or pulse. Framer moves its panels around between releases, so for the click-by-click follow Framer University's loading-animation lesson; the method holds wherever the buttons have gone. The ceiling is complexity. A conic-gradient spinner is an afternoon. Forty bars ringing a hub on offset phases is not a variants project.
Buying from the Framer marketplace gets you a working component in minutes, with props in the properties panel. The catalogue skews generic: spinners, dots, progress arcs in every flavour, mostly interchangeable with the loaders on every other site. If the loader is meant to carry some of your site's character, this is the hardest place to find it.
Embedding your own is the path most guides skip, and the one we care about, because it is how any loader that was not born in Framer gets in. A hand-tuned canvas animation, a CSS study from CodePen, a loader you bought as code. Two doors: the embed element for self-contained HTML, and code components for React. The next section is the actual workflow.
Embedding a loader in Framer, step by step
For a loader that ships as a single HTML file or snippet (ours do, and most code loaders can be flattened into one), the embed element is the whole job:
- Insert an embed element onto your page. It lives in Framer's insert menu under utilities.
- Switch the embed from URL mode to HTML mode.
- Paste the snippet: markup, styles and script in one block, no external dependencies.
- Set the embed's frame to the loader's intended size. A loader drawn for 200 by 200 pixels goes soft or clips when the frame fights it.
- Preview, and watch one full cycle of the loop before you call it done.
The paste-one-block detail matters more than it looks. An embed that reaches out for an external stylesheet or library has a loading state of its own, which is a joke at the loader's expense. Self-contained means the animation is running by the time anyone looks at it.
The code component route is for when you want the loader to behave like a native Framer citizen, with its colour and speed exposed as props in the properties panel. Create a new code file in Framer's assets panel, return your markup from a React component, and register the controls you want designers to touch. It is more work than the embed and worth it when one loader gets reused across a team or a template. If you only need it to play in one place, the embed wins on time.
What a finished loader looks like
This is Pulse, from our Spectrum drop: forty bars ringing a hub, each rising and falling on its own offset of the same beat. It is running live on this page from the same self-contained code that installs into a Framer embed.
spectrum / pulse · canvas · a few kB · runs on requestAnimationFrame
Notice what it is not doing: no reset, no stutter where the cycle ends. The frame at the end of the loop is identical to the frame at the start, which is the only way motion of unknown duration stays calm.
The judgment calls
We build loading animations for a living, and the difference between a loader that reads as designed and one that reads as installed comes down to four decisions.
Close the loop. Test by staring at one full cycle boundary. If you can point at the moment it repeats, it is not closed. This is the most common tell in marketplace loaders and the first thing we tune.
Ease the motion. Linear rotation looks like machinery. Real motion accelerates and settles. Framer's transition curves handle this on built loaders; on embedded ones the easing should already be in the code you paste.
Respect reduced motion. Some visitors ask their system to calm animation down, and a loader is exactly the looping, unavoidable motion that request is about. A built loader needs a static fallback; our embeds check the setting themselves and hold a still frame. The loader element should also carry a status role so screen readers announce waiting instead of describing a mystery canvas.
One loader per view. Two things pulsing at different rhythms read as noise. If a page has several loading regions, one animated loader and calmer placeholders elsewhere beats a chorus.
Code, GIF or Lottie
The format decides the weight and the sharpness. A code-drawn loader (CSS or canvas, like the demo above) is a few kilobytes, stays crisp at any size and any pixel density, and can recolour from a single variable. A GIF is the opposite on every count: hundreds of kilobytes for a blurry loop with baked-in colours. Lottie sits between, light-ish JSON but a runtime player to load and less control once exported. For something whose entire job is to appear instantly while everything else is still arriving, code is the format that makes sense, which is why the loaders we build for Framer ship that way. The Water drop's page goes deeper on the format question if you want the specimen detail.
Frequently asked questions
Does Framer have built-in loading animations?
Not as a ready-made primitive. Framer gives you the tools to make one (variants, loop transitions, the appear animation) and a marketplace of loader components built by others. There is no stock spinner you switch on; you build, buy, or embed.
How do I add a spinner in Framer without code?
Draw the shape on the canvas, wrap it in a component with a rotated variant, and set the transition to loop. Framer tweens the rotation and the spin runs on its own. Framer University's loading-animation lesson walks the current panels click by click.
Can I use a custom or hand-drawn loader in Framer?
Yes. Anything that runs as HTML, CSS and JavaScript drops into an embed element, and anything written as React becomes a code component. That is how our own loaders install: one self-contained snippet pasted into an embed, no dependencies.
Will a loading animation slow my Framer site down?
A code-drawn loader will not. Ours weigh a few kilobytes each, less than almost any image on the page. A video or GIF loader is the one that costs you: hundreds of kilobytes to sometimes megabytes, which is a strange price for something meant to cover waiting.
More in this series: all guides, or the sibling piece on adding a custom preloader in Framer for the full-page first-load case.