What time is it? - CSS Analog Clock Animation

Demo:

*to see the CSS Analog Clock on the website click here.

What do we need to do?

First, you need to have a clock face image (you can use this one below), and then follow three steps:

Add HTML
Add CSS
Add JavaScript (set the current time)

Step 1.

We need to create a clock face with hours, minutes, and seconds:

 <div class="clock">
  <div class="hour">
   <div class="hr" id="hr"></div>
  </div>
  <div class="minutes">
   <div class="min" id="min"></div>
  </div>
  <div class="seconds">
   <div class="sec" id="sec"></div>
  </div>
</div>

Step 2.

Add CSS

Set the colour and the position of the background and elements:

body {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-color: #008080;        
}

Style the clock:

.clock {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 350px;
 height: 350px;
 background: #8c2f39 url(https://lenadesignorg.files.wordpress.com/2020/01/clock-2.png?w=344);
 border-radius: 50%;
 border: 20px solid #b23a48; 
}

.clock:before {
 content: '';
 position: absolute;
 width: 15px;
 height: 15px;
 background-color: #333;
 border: 2px solid #8c2f39;
 border-radius: 50%;
 z-index:10;
}

.hour, .minutes, .seconds {
 position: absolute;
}

.hour, .hr {
 width: 160px;
 height: 160px;
}

.minutes, .min {
 width: 190px;
 height: 190px;
}

.seconds, .sec {
 width: 230px;
 height: 230px;
}

.hr,.min,.sec {
 display: flex;
 justify-content: center;
 position: absolute;
 border-radius: 50%;
}

.hr:before {
 content: '';
 position: absolute;
 width: 8px;
 height: 80px;
 background: #848484;
 border-radius: 6px 6px 0 0;
}

.min:before {
 content: '';
 position: absolute;
 width: 4px;
 height: 90px;
 background-color: #d6d6d6;
 border-radius: 6px 6px 0 0;
}

.sec:before {
 content: '';
 position: absolute;
 width: 2px;
 height: 150px;
 background-color: red;
 border-radius: 6px 6px 0 0;
}

Step 3.

Add JavaScript

Set the current time.

 const deg = 6;
 const hr = document.querySelector("#hr");
 const mn = document.querySelector("#min");
 const sc = document.querySelector("#sec");
 setInterval(() => {
  let day = new Date();
  let hh = day.getHours() * 30;
  let mm = day.getMinutes() * deg;
  let ss = day.getSeconds() * deg;
  hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;
  mn.style.transform = `rotateZ(${mm}deg)`;
  sc.style.transform = `rotateZ(${ss}deg)`;
 })


function initLocalClocks() {
  // Get the local time using JS
  var date = new Date;
  var seconds = date.getSeconds();
  var minutes = date.getMinutes();
  var hours = date.getHours();
  var hands = [
    {
      hand: 'hr',
      angle: (hr * 30) + (min / 2)
    },
    {
      hand: 'mn',
      angle: (mn * 6)
    },
    {
      hand: 'sc',
      angle: (sc * 6)
    }
  ];
  for (var j = 0; j < hands.length; j++) {
    var elements = document.querySelectorAll('.' + hands[j].hand);
    for (var k = 0; k < elements.length; k++) {
        elements[k].style.webkitTransform = 'rotateZ('+ hands[j].angle +'deg)';
        elements[k].style.transform = 'rotateZ('+ hands[j].angle +'deg)';
        // If this is a minute hand, note the seconds position (to calculate minute position later)
        if (hands[j].hand === 'mn') {
          elements[k].parentNode.setAttribute('data-second-angle', hands[j + 1].angle);
        }
    }
  }
}

To see the CSS Analog Clock on the website visit: lenastanley.com

Enjoy coding!

Share this: