Bootstrap Snippet Animated Clock using HTML CSS Javascript

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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ---------->
<h2>SVG Animated Clock</h2>
<svg id="svg" width="100%" height="100%" viewBox="-400 -150 800 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs>
        <path id="sec" d="M0,-140A140,140 0 0,1 0,140A140,140 0 0,1 0,-140"
            stroke-dasharray="880" stroke-dashoffset="-880.1" fill="none">
            <animate id="second" attributeName="stroke-dashoffset" 
                dur="1s" repeatCount="60"
                begin="0s;second.end" additive="sum" accumulate="sum"
                calcMode="spline" values="0;-14.66" keyTimes="0;1" 
                keySplines="0.42 0.0 0.58 1.0"/>
        </path>
        <path id="min" d="M0,-130A130,130 0 0,1 0,130A130,130 0 0,1 0,-130" 
            stroke-dasharray="817" stroke-dashoffset="-817.1" fill="none">
            <animate id="minute" attributeName="stroke-dashoffset" 
                dur="60s" repeatCount="60"
                begin="0s;minute.end" additive="sum" accumulate="sum"
                calcMode="spline" values="0;0;-13.613" keyTimes="0;0.9833;1" 
                keySplines="0,0,1,1;0.42 0.0 0.58 1.0"/>
        </path>
        <path id="hr" d="M0,-120A120,120 0 0,1 0,120A120,120 0 0,1 0,-120" 
            stroke-dasharray="754" stroke-dashoffset="-754.1" fill="none">
            <animate id="hour" attributeName="stroke-dashoffset" 
                dur="3600s" repeatCount="12"
                begin="0s;hour.end" additive="sum" accumulate="sum"
                calcMode="spline" values="0;0;-62.83" keyTimes="0;0.9997222;1" 
                keySplines="0,0,1,1;0.42 0.0 0.58 1.0"/>
        </path>
        <mask id="mask" maskUnits="userSpaceOnUse" x="-150" y="-150" width="300" height="300">
            <g stroke-width="10" stroke-linecap="round" stroke="white">
                <use xlink:href="#sec" x="0" y="0"/>
                <use xlink:href="#min" x="0" y="0"/>
                <use xlink:href="#hr" x="0" y="0"/>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@import url(https://fonts.googleapis.com/css?family=Ubuntu:700);
body{
  width:100%; 
  overflow:hidden;
  margin:0;
  font-family: 'Ubuntu', sans-serif; 
  background:hsla(0, 5%, 5%, 1);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-image: linear-gradient(to right top, hsla(0, 5%,15%, 0.5), hsla(0, 5%, 5%,1));
}
svg{
  width:100%; 
}
h2{
  text-align:center;
  color:hsla(255,255%,255%,1);
  margin-top:4%;
  font-size:2em;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
window.onload = function(){
    var now = new Date();
    var h = now.getHours(), m = now.getMinutes(), s = now.getSeconds();
    var curr = h * 60 * 60 + m * 60 + s;
    svg.setCurrentTime(curr);
};
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Animated Clock"
Bootstrap 4.0.0 Snippet by fazilkilic

Related: See More

Questions / Comments:

"Animated Clock" Bootstrap 4.0.0 Snippet by fazilkilic

Related: See More

Questions / Comments:

"Animated Clock"
Bootstrap 4.0.0 Snippet by fazilkilic