Animated loading icon

Technical Q&A
, , , ,
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>
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…

7

thank you so much! :folded_hands: