"timer with progress bar"
Bootstrap 4.1.1 Snippet by shehzadali110

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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(':');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: