Neumorphism Analog Clock UI Design Using HTML, CSS & JS

Hello readers, Today you’ll learn how to create a Neumorphism Analog Clock UI Design Using HTML, CSS & JavaScript. This type of Neumorphism Analog Clock is used on the websites for Clock Design.

You easily create Neumorphism Analog Clock UI Design Using HTML, CSS & JavaScript then this article will definitely help you. For this, you need to have an idea about basic HTML, CSS, and JavaScript then you can understand the following codes. It is designed in a completely modern way.

Some information about this Neumorphism Analog Clock UI Design

As you can see in the picture above it is a very simple and simple design. Here are three hands of hours, minutes, and seconds to see the time. There is bold line from 1 to 12 in the clock pulse every minute point show line. The time depends on the time of your device, that is, the time will be the same as the time of your device.

Watch the video tutorial to create Neumorphism Analog Clock UI Design

If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this Neumorphism Analog Clock UI Design step by step completely beautifully. So you can learn how to make these Neumorphism Analog Clock UI Design. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.

Hopefully, the above video tutorial has helped you to create this Neumorphism Analog Clock UI Design Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.

You might like this:

Neumorphism Analog Clock | Source Codes

You have to create HTML, CSS & JS File For this Analog Clock. After creating these files just paste the following codes into your file.

The First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Analog Clock</title>
    <!----CSS link----->
    <link rel="stylesheet" href="style.css"> 
</head>
<body>

  <div class="clock">
    <div class="clock__strokes">
      <div id="strokesHours" class="clock__strokes-hours"></div>
      <div id="strokesMinutes" class="clock__strokes-minutes"></div>
    </div>
    <div class="clock__pointers">
      <div class="clock__pointers-hours" id="hours"></div>
      <div class="clock__pointers-minutes" id="minutes"></div>
      <div class="clock__pointers-seconds" id="seconds"></div>
      <div class="clock__pointers-dot"></div>
    </div>
  </div>

  <!---JS CDN Link--->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <!---Custom CDN Link--->
  <script src="js.js"></script>
  
</body>
</html>

Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

CSS CODE:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #dae1eb;
  padding: 40px 0;
  overflow: auto;
}
.clock{
  flex-shrink: 0;
  position: relative;
  height: clamp(220px, 60vw, 340px);
  width: clamp(220px, 60vw, 340px);
  border-radius: 50%;
  box-shadow: 1rem 1rem 2rem rgba(0, 0, 0, .1),
              -1rem -1rem 2rem rgba(255, 255, 255, .5);
}
.clock__strokes,
.clock__strokes-hours,
.clock__strokes-minutes,
.clock__pointers{
  position: absolute;
  height: 100%;
  width: 100%;
}
.clock__strokes-hours{
  z-index: 200;
}
.clock__strokes-hours span,
.clock__strokes-minutes span{
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
}

.clock__strokes-hours span::before{
  content: "";
  background-color: #b6bbc5;
  background-color: #848484;
  height: 24px;
  height: clamp(14px, 4.23vw, 24px);
  width: 5px;
  border-radius: 10px;
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.clock__strokes-minutes span:before{
  content: "";
  background-color: #b6bbc5;
  height: 12px;
  height: clamp(7.76px, 2.11vw, 12px);
  width: 2px;
  border-radius: 10px;
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.clock__pointers-hours,
.clock__pointers-minutes,
.clock__pointers-seconds,
.clock__pointers-dot{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.clock__pointers-dot{
  height: clamp(13px, 3.53vw, 20px);
  width: clamp(13px, 3.53vw, 20px);
  border-radius: 50%;
  background-color: #848484;
  border: 2px solid #dae1eb;
  z-index: 600;
}
.clock__pointers-hours{
  z-index: 300;
}
.clock__pointers-minutes{
  z-index: 400;
}
.clock__pointers-seconds{
  z-index: 500;
}

.clock__pointers-hours::before{
  content: "";
  background-color: #848484;
  height: clamp(64px, 17.47vw, 99px);
  width: 8px;
  border-radius: 10px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.clock__pointers-hours::after{
  content: "";
  background-color: #848484;
  height: clamp(13px, 3.53vw, 20px);
  width: 8px;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.clock__pointers-minutes::before{
  content: "";
  background-color: #b6bbc5;
  height: clamp(88px, 24vw, 136px);
  width: 5px;
  border-radius: 10px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.clock__pointers-minutes::after{
  content: "";
  background-color: #b6bbc5;
  height: clamp(15px, 4.41vw, 25px);
  width: 5px;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.clock__pointers-seconds::before{
  content: "";
  background-color: #e57373;
  height: clamp(88px, 24vw, 136px);
  width: 3px;
  border-radius: 10px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.clock__pointers-seconds::after{
  content: "";
  background-color: #e57373;
  height: clamp(19px, 5.29vw, 30px);
  width: 3px;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

the third step, you have to create a JS file with the name of js.js and paste the given codes in your js file. Remember, you’ve to create a file with .js extension.

JS Code:

const hours = document.getElementById('hours');
const minutes = document.getElementById('minutes');
const seconds = document.getElementById('seconds');
const strokesHours = document.getElementById('strokesHours');
const strokesMinutes = document.getElementById('strokesMinutes');

function strokeClock(elementWrapper, deg, strokeTotal) {
  let degRotate = 0;
  for (let index = 0; index < strokeTotal; index++) {
    const span = document.createElement('span');
    degRotate += deg;
    span.style.transform = `rotateZ(${degRotate}deg)`;
    elementWrapper.append(span);
  }
}

strokeClock(strokesHours, 30, 12);
strokeClock(strokesMinutes, 6, 60);

function animate() {
  requestAnimationFrame(animate)
  const date = new Date();
  const hrs = date.getHours() * 30;
  const mins = date.getMinutes() * 6;
  const secs = date.getSeconds() * 6;
  
  hours.style.transform = `rotateZ(${hrs+(mins/12)}deg)`;
  minutes.style.transform = `rotateZ(${mins}deg)`;
  seconds.style.transform = `rotateZ(${secs}deg)`;
}
animate()

now you’ve successfully created this Neumorphism Analog Clock UI Design using HTML, CSS, and Javascript. If your code does not work or facing any error/problem to comment down or contact us through the contact page. otherwise, you can download all source code.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Categories