JSFiddle - React, Tailwind, and code Playground
HTML
<script src="ttp://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<table style="border-collapse: collapse;">
<tr>
<td>
<a href="http://zetlight.cz" target="_parent" id="ban">
<img src="http://rostlinna-akvaria.cz/bannery/led1.png" id="prvni" viditelne="1" style="opacity: 1;z-index: 5;position: relative;margin: 0 0;border-spacing: 0 0;padding: 0 0;display: inline-block;float: left;">
<img src="http://rostlinna-akvaria.cz/bannery/led2.png" id="druhy" style="position: relative;margin: 0 0;border-spacing: 0 0;padding: 0 0;display: inline-block;float: left;margin-left: -300px;">
</a>
</td>
</tr>
<tr>
<td style="background-color: gray;height: 7px;">
<div style="height: 7px;float: left;width: 0%;background-color: #0082ff;" id="load">
</div>
</td>
</tr>
</table>
CSS
* {
border: none;
text-decoration: none;
padding: 0 0;
margin: 0 0;
border-spacing: 0 0;
}
body {
background-color: rgb(231, 231, 231);
}
JavaScript
$(document).ready(function() {
setTimeout( function() {
casovac = setInterval(function() {animuj()}, 0);
}, 0);
function animuj() {
if(String($("#prvni").attr("viditelne")) == "1") {
$("#prvni").delay(2500).animate({
opacity: 0
}, 500, function() {
$("#prvni").attr("viditelne", "0");
});
} else {
$("#prvni").delay(2500).animate({
opacity: 1
}, 500, function() {
$("#prvni").attr("viditelne", "1");
});
}
$("#load").animate({
width: '100%'
}, 3000, function() {
$("#load").css("width", "0%");
});
}
});