preloader animation at starting of the webpage

Highlighted
New Member
1 0 0

I would like to add the pre loader animation to my web page how can i add it i have tried this code but the animation is applied to whole of my web page is there any one who can help me in that?

{% if template == 'index' %}
  <!-- your animation markup here -->
{% endif %} 

i have added the animation like this 

 


<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{{ request.page_type | handle }}">

{% if template == 'index' %}


<svg version="1.1" id="L1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<circle fill="none" stroke="#fff" stroke-width="6" stroke-miterlimit="15" stroke-dasharray="14.2472,14.2472" cx="50" cy="50" r="47" >
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="5s"
from="0 50 50"
to="360 50 50"
repeatCount="indefinite" />
</circle>
<circle fill="none" stroke="#fff" stroke-width="1" stroke-miterlimit="10" stroke-dasharray="10,10" cx="50" cy="50" r="39">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
dur="5s"
from="0 50 50"
to="-360 50 50"
repeatCount="indefinite" />
</circle>
<g fill="#fff">
<rect x="30" y="35" width="5" height="30">
<animateTransform
attributeName="transform"
dur="1s"
type="translate"
values="0 5 ; 0 -5; 0 5"
repeatCount="indefinite"
begin="0.1"/>
</rect>
<rect x="40" y="35" width="5" height="30" >
<animateTransform
attributeName="transform"
dur="1s"
type="translate"
values="0 5 ; 0 -5; 0 5"
repeatCount="indefinite"
begin="0.2"/>
</rect>
<rect x="50" y="35" width="5" height="30" >
<animateTransform
attributeName="transform"
dur="1s"
type="translate"
values="0 5 ; 0 -5; 0 5"
repeatCount="indefinite"
begin="0.3"/>
</rect>
<rect x="60" y="35" width="5" height="30" >
<animateTransform
attributeName="transform"
dur="1s"
type="translate"
values="0 5 ; 0 -5; 0 5"
repeatCount="indefinite"
begin="0.4"/>
</rect>
<rect x="70" y="35" width="5" height="30" >
<animateTransform
attributeName="transform"
dur="1s"
type="translate"
values="0 5 ; 0 -5; 0 5"
repeatCount="indefinite"
begin="0.5"/>
</rect>
</g>
</svg>


<!-- your animation markup here -->
{% endif %}

 

 

Can anyone help me on this please ?

 

0 Likes
Highlighted
Excursionist
42 0 5

Hey there,

If someone is still looking for answer, there are apps like Preloader which provide such functionality for your store,

https://apps.shopify.com/preloader

Easy to use, you don't need to struggle by yourself, nor pay developer more money to build it for you,

Take a look, it may work for you, looks nice and have plenty options to adjust

Maciej Tokarczyk
Shopify Expert
0 Likes