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:
Add following code before it:
This feature is very popular in modern websites. So, you should try it.
If you need my assistance, your could contact me via email@example.com. Although i am very busy during days, i will do utmost to give you a reply as soon as possible.