"Time"
Bootstrap 4.1.1 Snippet by trinhquan

Post to Facebook Tweet this

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
<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/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="countdown">
<div class="container days">
<canvas id="days-canvas" width="200" height="200"></canvas>
<svg width="200" height="200">
<circle id="outer" cx="100" cy="100" r="90" fill="transparent" stroke-width="20" stroke="#FF99C8" opacity="0.1"/>
</svg>
<div class="label">
<span id="days-value"></span><br>
<span>days</span>
</div>
</div>
<div class="container hours">
<canvas id="hours-canvas" width="200" height="200"></canvas>
<svg width="200" height="200">
<circle id="outer" cx="100" cy="100" r="90" fill="transparent" stroke-width="20" stroke="#FCF6BD" opacity="0.1"/>
</svg>
<div class="label">
<span id="hours-value"></span><br>
<span>hours</span>
</div>
</div>
<div class="container minutes">
<canvas id="minutes-canvas" width="200" height="200"></canvas>
<svg width="200" height="200">
<circle id="outer" cx="100" cy="100" r="90" fill="transparent" stroke-width="20" stroke="#EEBF96" opacity="0.1"/>
</svg>
<div class="label">
<span id="minutes-value"></span><br>
<span>minutes</span>
</div>
</div>
<div class="container seconds">
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 {
background-color: transparent;
font-family: "Lato", sans-serif;
}
.countdown {
display: flex;
justify-content: space-between;
margin: 20vh auto 0 auto;
width: 60%;
min-width: 800px;
}
.countdown .container {
position: relative;
}
.countdown .container svg {
position: absolute;
top: 0;
left: 15px;
}
.countdown .container .label {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-75%, -55%);
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.countdown .container .label span:first-of-type {
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
// Set Launch Date (ms)
const launchDate = new Date("Jan 1, 2025 10:15:00").getTime();
// Context object
const c = {
context: {},
values: {},
times: {}
};
// Convert radians to degrees
function deg(d) {
return (Math.PI/180)*d-(Math.PI/180)*90;
}
function render() {
c.context.seconds.clearRect(0, 0, 200, 200);
c.context.seconds.beginPath();
c.context.seconds.strokeStyle = "#A9DEF9";
c.context.seconds.arc(100, 100, 90, deg(0), deg(6 * (60 - c.times.seconds)));
c.context.seconds.lineWidth = 20;
c.context.seconds.lineCap = "round";
c.context.seconds.stroke();
c.context.minutes.clearRect(0, 0, 200, 200);
c.context.minutes.beginPath();
c.context.minutes.strokeStyle = "#A8FBCA";
c.context.minutes.arc(100, 100, 90, deg(0), deg(6 * (60 - c.times.minutes)));
c.context.minutes.lineWidth = 20;
c.context.minutes.lineCap = "round";
c.context.minutes.stroke();
c.context.hours.clearRect(0, 0, 200, 200);
c.context.hours.beginPath();
c.context.hours.strokeStyle = "#EEBF96";
c.context.hours.arc(100, 100, 90, deg(0), deg(15 * (24 - c.times.hours)));
c.context.hours.lineWidth = 20;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit

Questions / Comments: