How to Create Custom Loading Animations for Framer Websites

How to Create Custom Loading Animations for Framer Websites

New

New

New

  • Guide

  • Loading
  • Animation
  • Guide

  • Loading
  • Animation
  • Guide

  • Loading
  • Animation

How to Create Custom Loading Animations for Framer Websites

In this tutorial, you’ll learn how to craft a custom loader in Framer that goes way beyond the basics. We’ll draw a unique SVG shape, slice it with clever masking, and bring it to life with gradients and looping animation. It looks advanced—but once you see how it’s done, you’ll never settle for a default spinner again.

image of Nandi Muzsik

Posted by

Nandi

Set of modern loading animations including spinners, dots, bars, and a 'Thinking...' text indicator on a dark UI background
Set of modern loading animations including spinners, dots, bars, and a 'Thinking...' text indicator on a dark UI background
Set of modern loading animations including spinners, dots, bars, and a 'Thinking...' text indicator on a dark UI background

Table of contents

Create the loader shape

A loader is something that looks super simple. But when you try to make it Framer, it can seem a little tricky.

But once you’ve got it, it’s super simple. We’ll start by making a circular loader graphic using Framer’s graphic tool.

  • Press G to create a graphic layer.

  • Use the Pen tool to draw a single line.

  • Set the stroke width to 2px.

  • Duplicate that line a few times, rotating each copy slightly until it forms a full circle (think sunburst-style).

  • Select the entire graphic and export it as an SVG.

This SVG will become the base shape for your loader animation.

Create the loader shape

A loader is something that looks super simple. But when you try to make it Framer, it can seem a little tricky.

But once you’ve got it, it’s super simple. We’ll start by making a circular loader graphic using Framer’s graphic tool.

  • Press G to create a graphic layer.

  • Use the Pen tool to draw a single line.

  • Set the stroke width to 2px.

  • Duplicate that line a few times, rotating each copy slightly until it forms a full circle (think sunburst-style).

  • Select the entire graphic and export it as an SVG.

This SVG will become the base shape for your loader animation.

Create the loader shape

A loader is something that looks super simple. But when you try to make it Framer, it can seem a little tricky.

But once you’ve got it, it’s super simple. We’ll start by making a circular loader graphic using Framer’s graphic tool.

  • Press G to create a graphic layer.

  • Use the Pen tool to draw a single line.

  • Set the stroke width to 2px.

  • Duplicate that line a few times, rotating each copy slightly until it forms a full circle (think sunburst-style).

  • Select the entire graphic and export it as an SVG.

This SVG will become the base shape for your loader animation.

Empty square graphic element selected on a dark interface canvas in a design or prototyping tool

Adding graphic layer.

Empty square graphic element selected on a dark interface canvas in a design or prototyping tool

Adding graphic layer.

Empty square graphic element selected on a dark interface canvas in a design or prototyping tool

Adding graphic layer.

Set up the frame and mask

Now let’s get it working in Framer:

  • Draw a frame (just a plain square for now).

    Name it something like circle.

  • Wrap that frame in another frame. Set this wrapper’s fill to none and name it wrap.

  • On the wrap frame, apply the SVG you exported as a mask.

This gives us that sliced circle look.

Set up the frame and mask

Now let’s get it working in Framer:

  • Draw a frame (just a plain square for now).

    Name it something like circle.

  • Wrap that frame in another frame. Set this wrapper’s fill to none and name it wrap.

  • On the wrap frame, apply the SVG you exported as a mask.

This gives us that sliced circle look.

Set up the frame and mask

Now let’s get it working in Framer:

  • Draw a frame (just a plain square for now).

    Name it something like circle.

  • Wrap that frame in another frame. Set this wrapper’s fill to none and name it wrap.

  • On the wrap frame, apply the SVG you exported as a mask.

This gives us that sliced circle look.

Radial loading animation with white bars arranged symmetrically inside a square wrapper on a dark UI canvas

Loader coming together.

Radial loading animation with white bars arranged symmetrically inside a square wrapper on a dark UI canvas

Loader coming together.

Radial loading animation with white bars arranged symmetrically inside a square wrapper on a dark UI canvas

Loader coming together.

Add the center cutout

Right now, it still looks like a full circle. We want a hole in the center, right?

  • Add another mask, but this time set it to radial.

  • Adjust the radial mask values until you get that inner-circle cutout.

  • Go back to the original SVG mask and set its composite mode to “intersect”.

Now you’ve got the loader shape: a circle with a hole in the middle and sliced segments around the edge.

Animate it

Time to bring it to life.

  • On the inner circle frame, apply a conic gradient. This gives it a nice flowing color effect.

  • Add a looping rotation animation to the circle frame so it spins infinitely.

And that’s it! You’ve just created a slick, custom loading animation in Framer.

Want more loader styles?

If you want to skip the setup and grab a bunch of ready-made loaders, check out the Loader Animations in Framer resource. It includes a full collection of stylish, customizable loader components that you can paste right into your project.

Add the center cutout

Right now, it still looks like a full circle. We want a hole in the center, right?

  • Add another mask, but this time set it to radial.

  • Adjust the radial mask values until you get that inner-circle cutout.

  • Go back to the original SVG mask and set its composite mode to “intersect”.

Now you’ve got the loader shape: a circle with a hole in the middle and sliced segments around the edge.

Animate it

Time to bring it to life.

  • On the inner circle frame, apply a conic gradient. This gives it a nice flowing color effect.

  • Add a looping rotation animation to the circle frame so it spins infinitely.

And that’s it! You’ve just created a slick, custom loading animation in Framer.

Want more loader styles?

If you want to skip the setup and grab a bunch of ready-made loaders, check out the Loader Animations in Framer resource. It includes a full collection of stylish, customizable loader components that you can paste right into your project.

Add the center cutout

Right now, it still looks like a full circle. We want a hole in the center, right?

  • Add another mask, but this time set it to radial.

  • Adjust the radial mask values until you get that inner-circle cutout.

  • Go back to the original SVG mask and set its composite mode to “intersect”.

Now you’ve got the loader shape: a circle with a hole in the middle and sliced segments around the edge.

Animate it

Time to bring it to life.

  • On the inner circle frame, apply a conic gradient. This gives it a nice flowing color effect.

  • Add a looping rotation animation to the circle frame so it spins infinitely.

And that’s it! You’ve just created a slick, custom loading animation in Framer.

Want more loader styles?

If you want to skip the setup and grab a bunch of ready-made loaders, check out the Loader Animations in Framer resource. It includes a full collection of stylish, customizable loader components that you can paste right into your project.

Loader animation resource.

Loader animation resource.

Loader animation resource.

Turn it into a pre-loader

Once you’ve built your animation, you can easily turn it into a page loader with the Smooth Website Loader Component.

Perfect for portfolio sites, product pages, or anywhere you want to make the loading experience feel intentional and smooth.

Note that this won’t be a real loader that plays while the site loads. It’s loads for a fixed amount of time you define every time the page loads.

To make sure the loader doesn’t appear on each page visit, you can use the Show Once override.

Final thoughts

This trick might seem a bit hacky at first (SVG masks? intersect mode?), but once you’ve done it once, it clicks. And from there, you can go wild. Add easing, change gradients, make it pulse, whatever fits your brand.

So next time someone says, “Just throw in a loader,” you’ll know exactly how to build one that looks clean, custom, and totally yours.

Turn it into a pre-loader

Once you’ve built your animation, you can easily turn it into a page loader with the Smooth Website Loader Component.

Perfect for portfolio sites, product pages, or anywhere you want to make the loading experience feel intentional and smooth.

Note that this won’t be a real loader that plays while the site loads. It’s loads for a fixed amount of time you define every time the page loads.

To make sure the loader doesn’t appear on each page visit, you can use the Show Once override.

Final thoughts

This trick might seem a bit hacky at first (SVG masks? intersect mode?), but once you’ve done it once, it clicks. And from there, you can go wild. Add easing, change gradients, make it pulse, whatever fits your brand.

So next time someone says, “Just throw in a loader,” you’ll know exactly how to build one that looks clean, custom, and totally yours.

Turn it into a pre-loader

Once you’ve built your animation, you can easily turn it into a page loader with the Smooth Website Loader Component.

Perfect for portfolio sites, product pages, or anywhere you want to make the loading experience feel intentional and smooth.

Note that this won’t be a real loader that plays while the site loads. It’s loads for a fixed amount of time you define every time the page loads.

To make sure the loader doesn’t appear on each page visit, you can use the Show Once override.

Final thoughts

This trick might seem a bit hacky at first (SVG masks? intersect mode?), but once you’ve done it once, it clicks. And from there, you can go wild. Add easing, change gradients, make it pulse, whatever fits your brand.

So next time someone says, “Just throw in a loader,” you’ll know exactly how to build one that looks clean, custom, and totally yours.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More posts

More posts

  • Framer visual logic flow with input, find, and output blocks

    How to Add Logic To Your Framer Sites

    Guide

    Framer visual logic flow with input, find, and output blocks

    How to Add Logic To Your Framer Sites

    Guide

    Framer visual logic flow with input, find, and output blocks

    How to Add Logic To Your Framer Sites

    Guide

  • Minimalist effects button with blue spark icon, labeled 'Effects' and a close icon, on a dark background

    A Guide to Not Overdoing Framer Effects 

    Guide

    Minimalist effects button with blue spark icon, labeled 'Effects' and a close icon, on a dark background

    A Guide to Not Overdoing Framer Effects 

    Guide

    Minimalist effects button with blue spark icon, labeled 'Effects' and a close icon, on a dark background

    A Guide to Not Overdoing Framer Effects 

    Guide

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback