I'm in the process of loading my logo on my website's homepage. I found a LoadGo animation that I want to use, which can be downloaded Here
Currently, the logo is set to load when a button is clicked. However, I would like it to load automatically when the page loads. How can I properly integrate this into my website so that it displays during the loading process?
Are there any examples or samples available?
This is the code that I have:
<div class="container" style="margin-top: 150px;">
<div class="col-md-4 col-md-offset-4">
<img id="cocacola" src="cocacola.png" alt="Coca Cola Logo" class="img-responsive logo"
style="margin: 0 auto;" />
</div>
<div id="demo-progress-1" style="margin-bottom: 10px; font-size: 16px; opacity: 0;
font-weight: bold;">
0 %</div>
<button class="btn btn-primary" onclick="mainDemo();">
<span class="glyphicon glyphicon-thumbs-up"></span> Start
</button>
</div>
<script type="text/javascript">
var cocacolaInterval;
function mainDemo () {
$('#demo-msg-1').animate({
'opacity': '0'
});
$('#demo-progress-1').animate({
'opacity': '1'
});
// rest of the script...
};
$(window).load(function () {
$("#cocacola").load(function () {
// Main demo
$('#cocacola').loadgo();
}).each(function () {
if (this.complete) $(this).load();
});
//mainDemo();
// $(".container").hide();
});
</script>
The logo will be hidden after the page finishes loading.