"timer with progress bar"
Bootstrap 4.1.1 Snippet by shehzadali110

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <body> <div class="timer-group"> <div class="timer hour"> <div class="hand"> <span> </span> </div> </div> <div class="timer minute"> <div class="hand"> <span> </span> </div> </div> <div class="timer second"> <div class="hand"> <span> </span> </div> </div> <div class="face"> <p id="lazy">00:23:51</p> </div> </div> </body>
body { padding: 20px; /* background: #111; */ color: #fff; font-family: 'Yanone Kaffeesatz', sans-serif; } .timer-group { height: 100px; margin: 0 auto; position: relative; width: 100%; } .timer { height: 100px; overflow: hidden; position: absolute; width: 100%; } .timer:after { /* background: #111; */ content: ""; display: block; height: 100px; left: 10px; position: absolute; width: 100%; top: 10px; } .timer .hand { float: left; height: 100%; overflow: hidden; position: relative; width: 100%; } .timer .hand span { width: 100%; height: 100px; display: block; position: absolute; right: 0; top: 0; } .timer .hand span { animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; } .timer .hand:first-child span { animation-name: spin1; } .timer.hour { background: rgba(0, 0, 0, .3); height: 100px; left: 0; width: 100%; top: 0; } .timer.hour .hand span { animation-duration: 3600s; background-color: rgba(255, 0, 255, .4); } .timer.hour:after { height: auto; left: 20px; width: auto; top: 20px; } .timer.minute { background: rgba(0, 0, 0, .2); height: 100px; left: 0; width: 100%; top: 0; } .timer.minute .hand span { animation-duration: 60s; background-color: rgba(0, 255, 255, .4); } .timer.minute:after { height: auto; width: auto; top: 20px; } .timer.second { background: rgba(0, 0, 0, .2); height: 100px; left: 0; width: 100%; top: 0; } .timer.second .hand span { animation-duration: 1s; background-color: rgba(255, 255, 255, .15); } .timer.second:after { height: 100px; left: 0; width: 100%; top: 0; } .face { background: rgba(0, 0, 0, .1); height: 100px; left: 0; position: absolute; width: 100%; text-align: center; top: 0; } .face h2 { font-weight: 300; } .face p { font-size: 76px; font-weight: 400; position: absolute; margin: 0px; width: 100%; left: 0; top: 0; } @keyframes spin1 { from { width: 0%; } to { width: 100%; } }
var defaults = {}, one_second = 1000, one_minute = one_second * 60, one_hour = one_minute * 60, one_day = one_hour * 24, startDate = new Date(), face = document.getElementById('lazy'); var requestAnimationFrame = function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; }(); tick(); function tick() { var now = new Date(), elapsed = now - startDate, parts = []; parts[0] = '' + Math.floor(elapsed / one_hour); parts[1] = '' + Math.floor(elapsed % one_hour / one_minute); parts[2] = '' + Math.floor(elapsed % one_hour % one_minute / one_second); parts[0] = parts[0].length == 1 ? '0' + parts[0] : parts[0]; parts[1] = parts[1].length == 1 ? '0' + parts[1] : parts[1]; parts[2] = parts[2].length == 1 ? '0' + parts[2] : parts[2]; face.innerText = parts.join(':'); requestAnimationFrame(tick); }

Related: See More


Questions / Comments: