[TomatoCart] An elegant loading bar for bootstrap template

In this article, I will show you an elegant loading bar for the bootstrap template. When the page is loading, your customer will see an elegant bar showing in the top of browser. You might be familiar with it as it is the same used at Youtube. By the end of this article, your website will show a loading bar like the one below:


You could also have a look at the video demonstration at https://youtu.be/QCeeX41CxDM.

Steps to apply this loading bar into your store

Step 1. Download loading-bar.zip at https://www.dropbox.com/s/njp7l6kviets1wy/loading-bar.zip?dl=0

Step 2. Unzip it and copy the templates directory into your TomatoCart root directory to override the original files.

Step 3. Open the templates > bootstrap > index.php with your favorite text editor.

Step 4. Find following code snippet:

<!-- touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="templates/<?php echo $osC_Template->getCode(); ?>/images/apple-touch-icon-144-precomposed.png"

Add following code snippet before it:

<!-- Processing bar -->
<link rel="stylesheet" type="text/css" href="templates/<?php echo $osC_Template->getCode(); ?>/css/processbar.css" />

Step 5. Find following code snippet:


Replace it with:

<body class="tc-desktop-processing">
   <!-- Processing bar -->
   <div class="tc-processing-bar"></div>

Step 6. Find following code snippet:

<script type="text/javascript">

Add following code before it:

<!-- Processing bar -->
<script type="text/javascript" src="templates/<?php echo $osC_Template->getCode(); ?>/javascript/processbar.js"></script>

Final Word

This feature is very popular in modern websites. So, you should try it.

If you need my assistance, your could contact me via support@tomatocart.com. Although i am very busy during days, i will do utmost to give you a reply as soon as possible.


Looking for quality TomatoCart hosting? Check out Arvixe Web Solutions.

Tags: , , , , , , , | Posted under TomatoCart | RSS 2.0

Author Spotlight

Jack Yin

TomatoCart Developer & Co Founder - Arvixe Web Hosting / TomatoCart Community Liaison

Leave a Reply

Your email address will not be published. Required fields are marked *