Animated clock using React JS Hooks

Let’s build an animated clock using the React Hooks.


Create an HTML for the clock pointer circle, second, minute, and hour handles


body {background-color: #1a1a1a;display: flex;align-items: center;justify-content: center;height: 100vh;}.clock-container {display: flex;align-items: center;justify-content: center;background-image: url("clock.png");}.clock-container .clock {background: url("");background-size: 100% 100%;height: 150px;width: 150px;display: flex;align-items: center;justify-content: center;border-radius: 50%;background-color: #1e1e1e;box-shadow: 0px 0px 10px 10px rgba(0, 224, 255, 0.2);}.clock .hor,.clock .min,.clock .sec {position: relative;display: flex;align-items: center;justify-content: center;}.clock .hor .hr {background-color: #3d6cb9;position: absolute;height: 30px;width: 2px;bottom: 0px;z-index: 8;border-radius: 2px;}.clock .min .mn {background-color: #00d1ff;position: absolute;height: 45px;width: 2px;bottom: 0px;z-index: 9;border-radius: 2px;}.clock .sec .sc {background-color: #00fff0;position: absolute;height: 60px;width: 2px;bottom: -15px;z-index: 10;border-radius: 2px;}


Now create useEffect hook that will refresh the timer for every 1 second(ideal for the clock to refresh every 1 second) using the setInterval timer function. useRef is used to create references for the second, minute and hour handles that we need to rotate based on the time.




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store