Tips & tricks
- Code override
- Effect
- Site loader
Tips & tricks
- Code override
- Effect
- Site loader
Tips & tricks
- Code override
- Effect
- Site loader
How to Make Your Site Loader Appear Only Once
In this blog I’m going to walk you through how to make your site loader appear only once in your Framer project. Using a code override.
Posted by
Nandi
Table of contents
Hey friend :) So a few people who used my site loader component, had the issue of it appearing and playing on every single site load.
Psst…If you’re wondering how to set up the site loader component, check out my video tutorial on it ;)
Anyways back to it…
Hey friend :) So a few people who used my site loader component, had the issue of it appearing and playing on every single site load.
Psst…If you’re wondering how to set up the site loader component, check out my video tutorial on it ;)
Anyways back to it…
Hey friend :) So a few people who used my site loader component, had the issue of it appearing and playing on every single site load.
Psst…If you’re wondering how to set up the site loader component, check out my video tutorial on it ;)
Anyways back to it…
What’s the fix?
I put together a little something called a “show once override.” This little trick ensures your loader plays just once and then stays out of the way. Here’s how you can set it up:
What’s the fix?
I put together a little something called a “show once override.” This little trick ensures your loader plays just once and then stays out of the way. Here’s how you can set it up:
What’s the fix?
I put together a little something called a “show once override.” This little trick ensures your loader plays just once and then stays out of the way. Here’s how you can set it up:
Step 1: Grab the code
Head over to the resource link, and copy the "ShowOnce" code override. It’s the secret ingredient for your loader!
Step 2: Add it to your project
Okay so I want you to open your Framer project: Go to the assets Panel.
Now you need to create an override
the way you do it is click the plus (+) button.
Now choose “create override.”
Delete the auto-generated code.
And finally paste in the "ShowOnce" code you copied earlier ;)
Step 3: Apply the override
Alright so on the primary breakpoint, you want to select your loader component
Now on the right panel, find the code overrides section
Then click plus, and apply the “ShowOnce” override that you’ve just created
It’s too easy, next
Step 4: Choose how often it shows
Here’s the fun part, you can set the loader to show once per:
Hour which is useful for frequent visitors.
Day that’s a balanced option for regular users.
Week or Month for a more subtle approach.
Step 1: Grab the code
Head over to the resource link, and copy the "ShowOnce" code override. It’s the secret ingredient for your loader!
Step 2: Add it to your project
Okay so I want you to open your Framer project: Go to the assets Panel.
Now you need to create an override
the way you do it is click the plus (+) button.
Now choose “create override.”
Delete the auto-generated code.
And finally paste in the "ShowOnce" code you copied earlier ;)
Step 3: Apply the override
Alright so on the primary breakpoint, you want to select your loader component
Now on the right panel, find the code overrides section
Then click plus, and apply the “ShowOnce” override that you’ve just created
It’s too easy, next
Step 4: Choose how often it shows
Here’s the fun part, you can set the loader to show once per:
Hour which is useful for frequent visitors.
Day that’s a balanced option for regular users.
Week or Month for a more subtle approach.
Step 1: Grab the code
Head over to the resource link, and copy the "ShowOnce" code override. It’s the secret ingredient for your loader!
Step 2: Add it to your project
Okay so I want you to open your Framer project: Go to the assets Panel.
Now you need to create an override
the way you do it is click the plus (+) button.
Now choose “create override.”
Delete the auto-generated code.
And finally paste in the "ShowOnce" code you copied earlier ;)
Step 3: Apply the override
Alright so on the primary breakpoint, you want to select your loader component
Now on the right panel, find the code overrides section
Then click plus, and apply the “ShowOnce” override that you’ve just created
It’s too easy, next
Step 4: Choose how often it shows
Here’s the fun part, you can set the loader to show once per:
Hour which is useful for frequent visitors.
Day that’s a balanced option for regular users.
Week or Month for a more subtle approach.
Show once override customizablity.
Show once override customizablity.
Show once override customizablity.
Why this works well
Well now your visitors won’t get tired of seeing the same animation repeatedly. the less animation there is the faster the load times. And you get to set the frequency that makes the most sense for your site.
Quick troubleshooting tips
You’ll want to ensure the override is applied to your loader layer.
Try testing it by setting a short frequency (like an hour) to see how it works before finalizing.
Why this works well
Well now your visitors won’t get tired of seeing the same animation repeatedly. the less animation there is the faster the load times. And you get to set the frequency that makes the most sense for your site.
Quick troubleshooting tips
You’ll want to ensure the override is applied to your loader layer.
Try testing it by setting a short frequency (like an hour) to see how it works before finalizing.
Why this works well
Well now your visitors won’t get tired of seeing the same animation repeatedly. the less animation there is the faster the load times. And you get to set the frequency that makes the most sense for your site.
Quick troubleshooting tips
You’ll want to ensure the override is applied to your loader layer.
Try testing it by setting a short frequency (like an hour) to see how it works before finalizing.
Wrapping up
That’s it! With this setup, your loader knows when to show up and when to stay hidden, so that your visitors won’t get annoyed with every page dragging on with a reloader.
See you around mate.
Wrapping up
That’s it! With this setup, your loader knows when to show up and when to stay hidden, so that your visitors won’t get annoyed with every page dragging on with a reloader.
See you around mate.
Wrapping up
That’s it! With this setup, your loader knows when to show up and when to stay hidden, so that your visitors won’t get annoyed with every page dragging on with a reloader.
See you around mate.
