Animated loading icon

Technical Q&A
, , , ,

Topic summary

A user wanted to add an animated rotating logo on page load without using paid apps.

Multiple solutions were provided using CSS animations:

Initial Solution:

  • Add CSS keyframe animation to assets/theme.css targeting .header__logo__link
  • Creates continuous spinning effect using transform: rotate()
  • Warning: Direct theme file edits may cause issues during theme upgrades

Alternative Approach:

  • Use Custom Liquid/Custom Code section in Footer to avoid theme file modifications
  • Allows adding <style> tags with keyframe animations without triggering Custom CSS restrictions

Follow-up Request:
The user successfully implemented the solution and then asked for scroll-triggered rotation (logo rotates only when scrolling).

Scroll-Based Solution:

  • JavaScript tracks scroll position using window.addEventListener('scroll')
  • CSS custom property --scrolled calculates rotation based on scroll depth
  • transform: rotate(calc(720deg * var(--scrolled))) creates dynamic rotation effect

Both solutions were confirmed working by the original poster.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I would like to have an animated logo on page load. Something simple like the logo that rotates like this example. For now I only have the logo as a static image.

Is it possible to achieve this without using a paid app?

Website link here: https://or1mgs30gcun0kys-26038403108.shopifypreview.com

Thanks in advance!

2

Hi @maggiebovary

You can try to add this code to the end of your assets/theme.css file

.header__logo__link {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

That will make the logo spin indefinitely. Note that way it could cause issues when you try to upgrade but just remember that code. It would be better it could be used in the Custom CSS block of the Header section, but keyframes are not allowed.

3

Something Like this right, Xasadi.com ?

4

You can do that without code editing, event though “Custom CSS” is too picky.

Go to Customize, add a “Custom liquid”/“Custom code” section to the Footer group and paste code like this:

<style>
  .loading__image {
    animation: spin 3s linear infinite;
  }

  @keyframes spin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
  }
</style>
2 Likes
5

I had to put it in the liquid code but it works, thank you so much! Love it :heart_eyes:

Would it also be possible to make the logo in the navigation rotate when scrolling down and up the page (so if you don’t scroll it does’t rotate)?

6

Yes, you can
Here is the code:

<script>
  window.addEventListener('scroll', (e)=> { 
    const body = document.documentElement;
    body.style.setProperty( '--scrolled', body.scrollTop / body.offsetHeight );
  }, {passive: true});
</script>
<style>
  .logo__img img {
    transform: rotate(calc(720deg * var(--scrolled)));
    transition: 0.3s linear;
  }
</style>

Put it together with the code above and you can play with the CSS rules.
This is, of course, is the very simple solution…

2 Likes
7

thank you so much! :folded_hands:

1 Like
8

(post deleted by author)