<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container ora-bar"> <div id="showOren"></div> </div>

.ora-bar { background-color: #1b1b1b; } .pm { color: #f0ad4e; font-size: 12px; } .tbprogress { margin: 0px; border: none; width: 100%; } .tboraNum { margin-top: -2px; margin-bottom: -2px; text-shadow: none; width: 100%; } .kohaProgress { height: 4px; margin-left: 0; background-color: #353535; overflow: hidden; } .sekProgress { height: 2px; margin-left: 0; background-color: #353535; overflow: hidden; } .sek { background-color: #E0E0E0; } .oraNum { width: 8.333333333%; text-align: left; color: #56ae5b; font-size: 10px; font-style: italic; } .minNum { width: 16.16666666%; text-align: left; color: #f0ad4e; font-size: 12px; }

$(document).ready(function() { krijoOren(); }); function krijoOren(){ d = new Date(); var oraTani = d.getHours(); var minutani = d.getMinutes(); var sekondatani = d.getSeconds(); var showOren=''; var pm = 'PM'; if(oraTani>12){ oraTani = (oraTani-12)*60+minutani }else{ oraTani = oraTani*60+minutani; pm = 'AM'; } perqindOra=(oraTani/720)*100; perqindMin=(minutani/60)*100; perqindSek=(sekondatani/60)*100; showOren='<table class="tboraNum"><tr><td class="oraNum">0</td><td class="oraNum">1</td ><td class="oraNum">2</td><td class="oraNum">3</td><td class="oraNum">4</td><td class="oraNum">5</td><td class="oraNum">6</td><td class="oraNum">7</td><td class="oraNum">8</td><td class="oraNum">9</td><td class="oraNum">10</td><td class="oraNum">11</td><td class="pm">'+pm+'</td></tr></table>'+ '<div class="ora"><div class="kohaProgress"><div class="progress-bar progress-bar-info"'+ 'role="progressbar" aria-valuenow="'+perqindOra+'" aria-valuemin="0" aria-valuemax="100"'+ 'style="width: '+perqindOra+'%;"></div></div></div>'; showOren=showOren+'<div class="sekondat"><div class="sekProgress">'+ '<div class="progress-bar progress-bar-default sek"'+ 'role="progressbar" aria-valuenow="'+perqindSek+'" aria-valuemin="0" aria-valuemax="100"'+ 'style="width: '+perqindSek+'%;"></div></div></div>'; showOren=showOren+'<div class="minutat"><div class="kohaProgress">'+ '<div class="progress-bar progress-bar-warning"'+ 'role="progressbar" aria-valuenow="'+perqindMin+'" aria-valuemin="0" aria-valuemax="100"'+ 'style="width: '+perqindMin+'%;"></div></div></div>'; showOren=showOren+'<table class="tboraNum"><tr><td class="minNum">0</td><td class="minNum">10</td><td class="minNum">20</td><td class="minNum">30</td><td class="minNum">40</td><td class="minNum">50</td><td class="minNum">60</td></tr></table>'; $('#showOren').html(showOren); setTimeout(function () { krijoOren(); }, 1000); }