How to customize the widget preloader

When the Storemapper widget is initiated, an animated marker is shown while the list of stores is loaded into the page.

By default, the preloader is displayed with the colors of our logo, but what if you want to customize it to match the colors of your brand?

Given that the preloader consists of two SVG elements (the pin marker and the shadow), you can change its appearance with just a few lines of CSS.

Use the following snippet and replace the value of the “fill” property with the color(s) you want to use.

#storemapper .storemapper-loader-marker {
fill: #4D394B;
}
#storemapper .storemapper-loader-shadow {
fill: #4c9689;
}

In the example above, the preloader will look like this:

 

Wrap preloader styles into <style></style> tag and place into your embed code like below
<div id="storemapper" style="width: 100%;">
<p>Store Locator is loading from <a href="https://www.storemapper.co">Storemapper store locator</a>...</p>
</div>
<style>
#storemapper .storemapper-loader-marker {fill: #4D394B;}
#storemapper .storemapper-loader-shadow {fill: #4c9689;}
</style>
<script data-storemapper-start='2015,11,22' data-storemapper-id='1'>(function() {var script = document.createElement('script');script.type = 'text/javascript';script.async = true;script.src = document.location.protocol + '//www.storemapper.co/js/widget.js'; var entry = document.getElementsByTagName('script')[0];entry.parentNode.insertBefore(script, entry);}());</script>

 

 

Was this article helpful?

Related Articles