Categories
CSS JavaScript Web development

What time is it? – CSS Analog Clock Animation

It’s always about Yes… It does matter. It’s always about time. Why not, to put a Clock on your web page too? Be always on time with a bit of help from CSS and JavaScript.

CSS Analog Clock Animation
Do you like this image? Check more images in the store.

To see the final result with the current time click here.

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

  1. Add HTML
  2. Add CSS
  3. Add JavaScript
  4. Set the correct time

Step 1.

Let’s start with some HTML.

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

<body>
	<div class="clock">
		<div class="hour">
			<div class="hr" id="hr"></div>
		</div>
		<div class="min">
			<div class="mn" id="mn"></div>
		</div>
		<div class="sec">
			<div class="sc" id="sc"></div>
		</div>
	</div>
</body>

Step 2.

Add CSS

Let’s style our clock.

{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #008080;
        
}
.clock {
	width: 350px;
	height: 350px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #8B0000 url(clock.png);
	background-size: cover;
	border-radius: 50%;
	border: 20px solid red;
	box-shadow: inset 0 0 30px rgba(0, 0, 0, .1),
				0 20px 20px rgba(0,0,0,.2),
				0 0 0 4px rgba(255,255,255,1);
}
.clock::before {
	content: '';
	position: absolute;
	width: 15px;
	height: 15px;
	background: #800000;
	border: 2px solid #8B0000;
	z-index: 100000;
	border-radius: 50%;
}
.hour, .min, .sec {
	position: absolute;
}
.hour, .hr {
	width: 160px;
	height: 160px;
}
.min, .mn {
	width: 190px;
	height: 190px;
}
.sec, .sc {
	width: 230px;
	height: 230px;
}
.hr,.mn,.sc {
	display: flex;
	justify-content: center;
	position: absolute;
	border-radius: 50%;
}
.hr::before {
	content: '';
	position: absolute;
	width: 8px;
	height: 80px;
	background: #848484;
	z-index: 10;
	border-radius: 6px 6px 0 0;
}
.mn::before {
	content: '';
	position: absolute;
	width: 4px;
	height: 90px;
	background: #d6d6d6;
	z-index: 11;
	border-radius: 6px 6px 0 0;
}
.sc::before {
	content: '';
	position: absolute;
	width: 2px;
	height: 150px;
	background: #ff6767;
	z-index: 12;
	border-radius: 6px 6px 0 0;
}

Step 3.

Add JavaScript

If you are unsure where to add JavaScript code click here and find out more.

<script type="text/javascript">
	const deg = 6;
	const hr = document.querySelector("#hr");
	const mn = document.querySelector("#mn");
	const sc = document.querySelector("#sc");
	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)`;
	})
</script>

Step 4.

Set the current time.

It’s looking better if the clock on the web page has the correct time. Use the code below and finish your animation with an accurate time.

<script>
function initLocalClocks() {
  // Get the local time using JS
  var date = new Date;
  var seconds = date.getSeconds();
  var minutes = date.getMinutes();
  var hours = date.getHours();

  // Create an object with each hand and it's angle in degrees
  var hands = [
    {
      hand: 'hr',
      angle: (hr * 30) + (mn / 2)
    },
    {
      hand: 'mn',
      angle: (mn * 6)
    },
    {
      hand: 'sc',
      angle: (sc * 6)
    }
  ];
  // Loop through each of these hands to set their angle
  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 live output visit: lenastanley.com

Leave a Reply