Clock With Progress Bar Style Using HTML,CSS and JavaScript
Welcome to the Codewithrandom blog. In this blog, We learn how to create a Clock With Progress Bar Style. We use Html, Css, and JavaScript for this Clock With Progress Bar Style.
I hope you enjoy our blog so let’s start with a basic html structure for a Clock With Progress Bar Style.
HTML Code For Clock With Progress Bar Style
Paste this code in <body> tag and don’t forget to create your html structure and link css and javascript files.
<div id="clock" class="progress-clock">
<button class="progress-clock__time-date" data-group="d" type="button">
<small data-unit="w">Sunday</small><br>
<span data-unit="mo">January</span>
<span data-unit="d">1</span>
</button>
<button class="progress-clock__time-digit" data-unit="h" data-group="h" type="button">12</button><span class="progress-clock__time-colon">:</span><button class="progress-clock__time-digit" data-unit="m" data-group="m" type="button">00</button><span class="progress-clock__time-colon">:</span><button class="progress-clock__time-digit" data-unit="s" data-group="s" type="button">00</button>
<span class="progress-clock__time-ampm" data-unit="ap">AM</span>
<svg class="progress-clock__rings" width="256" height="256" viewBox="0 0 256 256">
<defs>
<linearGradient id="pc-red" x1="1" y1="0.5" x2="0" y2="0.5">
<stop offset="0%" stop-color="hsl(343,90%,55%)" />
<stop offset="100%" stop-color="hsl(323,90%,55%)" />
</linearGradient>
<linearGradient id="pc-yellow" x1="1" y1="0.5" x2="0" y2="0.5">
<stop offset="0%" stop-color="hsl(43,90%,55%)" />
<stop offset="100%" stop-color="hsl(23,90%,55%)" />
</linearGradient>
<linearGradient id="pc-blue" x1="1" y1="0.5" x2="0" y2="0.5">
<stop offset="0%" stop-color="hsl(223,90%,55%)" />
<stop offset="100%" stop-color="hsl(203,90%,55%)" />
</linearGradient>
<linearGradient id="pc-purple" x1="1" y1="0.5" x2="0" y2="0.5">
<stop offset="0%" stop-color="hsl(283,90%,55%)" />
<stop offset="100%" stop-color="hsl(263,90%,55%)" />
</linearGradient>
</defs>
<!-- Days of Month -->
<g data-units="d">
<circle class="progress-clock__ring" cx="128" cy="128" r="74" fill="none" opacity="0.1" stroke="url(#pc-red)" stroke-width="12" />
<circle class="progress-clock__ring-fill" data-ring="mo" cx="128" cy="128" r="74" fill="none" stroke="url(#pc-red)" stroke-width="12" stroke-dasharray="465 465" stroke-dashoffset="465" stroke-linecap="round" transform="rotate(-90,128,128)" />
</g>
<!-- Hours of Day -->
<g data-units="h">
<circle class="progress-clock__ring" cx="128" cy="128" r="90" fill="none" opacity="0.1" stroke="url(#pc-yellow)" stroke-width="12" />
<circle class="progress-clock__ring-fill" data-ring="d" cx="128" cy="128" r="90" fill="none" stroke="url(#pc-yellow)" stroke-width="12" stroke-dasharray="565.5 565.5" stroke-dashoffset="565.5" stroke-linecap="round" transform="rotate(-90,128,128)" />
</g>
<!-- Minutes of Hour -->
<g data-units="m">
<circle class="progress-clock__ring" cx="128" cy="128" r="106" fill="none" opacity="0.1" stroke="url(#pc-blue)" stroke-width="12" />
<circle class="progress-clock__ring-fill" data-ring="h" cx="128" cy="128" r="106" fill="none" stroke="url(#pc-blue)" stroke-width="12" stroke-dasharray="666 666" stroke-dashoffset="666" stroke-linecap="round" transform="rotate(-90,128,128)" />
</g>
<!-- Seconds of Minute -->
<g data-units="s">
<circle class="progress-clock__ring" cx="128" cy="128" r="122" fill="none" opacity="0.1" stroke="url(#pc-purple)" stroke-width="12" />
<circle class="progress-clock__ring-fill" data-ring="m" cx="128" cy="128" r="122" fill="none" stroke="url(#pc-purple)" stroke-width="12" stroke-dasharray="766.5 766.5" stroke-dashoffset="766.5" stroke-linecap="round" transform="rotate(-90,128,128)" />
</g>
</svg>
</div>There Is All The Html Code For The Clock With Progress Bar Style. Now, You Can See Output Without Css And Javascript. Then We Write Css Code For Styling And Give Main Progress Bar Style Using Javascript.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
Output
CSS Code For Clock With Progress Bar Style
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue),10%,90%);
--fg: hsl(var(--hue),10%,10%);
font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}
body, button {
color: var(--fg);
font: 1em/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body {
background-color: var(--bg);
height: 100vh;
display: grid;
place-items: center;
}
.progress-clock {
display: grid;
justify-content: center;
align-content: center;
position: relative;
text-align: center;
width: 16em;
height: 16em;
}
.progress-clock__time-date,
.progress-clock__time-digit,
.progress-clock__time-colon,
.progress-clock__time-ampm {
transition: color 0.2s linear;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.progress-clock__time-date,
.progress-clock__time-digit {
background: transparent;
}
.progress-clock__time-date,
.progress-clock__time-ampm {
grid-column: 1 / 6;
}
.progress-clock__time-date {
font-size: 0.75em;
line-height: 1.33;
}
.progress-clock__time-digit,
.progress-clock__time-colon {
font-size: 2em;
font-weight: 400;
grid-row: 2;
}
.progress-clock__time-colon {
line-height: 1.275;
}
.progress-clock__time-ampm {
cursor: default;
grid-row: 3;
}
.progress-clock__rings {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.progress-clock__ring {
opacity: 0.1;
}
.progress-clock__ring-fill {
transition:
opacity 0s 0.3s linear,
stroke-dashoffset 0.3s ease-in-out;
}
.progress-clock__ring-fill--360 {
opacity: 0;
stroke-dashoffset: 0;
transition-duration: 0.3s;
}
[data-group]:focus {
outline: transparent;
}
[data-units] {
transition: opacity 0.2s linear;
}
[data-group="d"]:focus,
[data-group="d"]:hover {
color: hsl(333,90%,55%);
}
[data-group="h"]:focus,
[data-group="h"]:hover {
color: hsl(33,90%,55%);
}
[data-group="m"]:focus,
[data-group="m"]:hover {
color: hsl(213,90%,55%);
}
[data-group="s"]:focus,
[data-group="s"]:hover {
color: hsl(273,90%,55%);
}
[data-group]:focus ~ .progress-clock__rings [data-units],
[data-group]:hover ~ .progress-clock__rings [data-units] {
opacity: 0.2;
}
[data-group="d"]:focus ~ .progress-clock__rings [data-units="d"],
[data-group="d"]:hover ~ .progress-clock__rings [data-units="d"],
[data-group="h"]:focus ~ .progress-clock__rings [data-units="h"],
[data-group="h"]:hover ~ .progress-clock__rings [data-units="h"],
[data-group="m"]:focus ~ .progress-clock__rings [data-units="m"],
[data-group="m"]:hover ~ .progress-clock__rings [data-units="m"],
[data-group="s"]:focus ~ .progress-clock__rings [data-units="s"],
[data-group="s"]:hover ~ .progress-clock__rings [data-units="s"] {
opacity: 1;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue),10%,10%);
--fg: hsl(var(--hue),10%,90%);
}
.progress-clock__ring {
opacity: 0.2;
}
}We have completed our Css section, Here is our updated output HTML + CSS.
Portfolio Website using HTML and CSS (Source Code)
Output
JavaScript Code For Clock With Progress Bar Style
window.addEventListener("DOMContentLoaded",() => {
const clock = new ProgressClock("#clock");
});
class ProgressClock {
constructor(qs) {
this.el = document.querySelector(qs);
this.time = 0;
this.updateTimeout = null;
this.ringTimeouts = [];
this.update();
}
getDayOfWeek(day) {
switch (day) {
case 1:
return "Monday";
case 2:
return "Tuesday";
case 3:
return "Wednesday";
case 4:
return "Thursday";
case 5:
return "Friday";
case 6:
return "Saturday";
default:
return "Sunday";
}
}
getMonthInfo(mo,yr) {
switch (mo) {
case 1:
return { name: "February", days: yr % 4 === 0 ? 29 : 28 };
case 2:
return { name: "March", days: 31 };
case 3:
return { name: "April", days: 30 };
case 4:
return { name: "May", days: 31 };
case 5:
return { name: "June", days: 30 };
case 6:
return { name: "July", days: 31 };
case 7:
return { name: "August", days: 31 };
case 8:
return { name: "September", days: 30 };
case 9:
return { name: "October", days: 31 };
case 10:
return { name: "November", days: 30 };
case 11:
return { name: "December", days: 31 };
default:
return { name: "January", days: 31 };
}
}
update() {
this.time = new Date();
if (this.el) {
// date and time
const dayOfWeek = this.time.getDay();
const year = this.time.getFullYear();
const month = this.time.getMonth();
const day = this.time.getDate();
const hr = this.time.getHours();
const min = this.time.getMinutes();
const sec = this.time.getSeconds();
const dayOfWeekName = this.getDayOfWeek(dayOfWeek);
const monthInfo = this.getMonthInfo(month,year);
const m_progress = sec / 60;
const h_progress = (min + m_progress) / 60;
const d_progress = (hr + h_progress) / 24;
const mo_progress = ((day - 1) + d_progress) / monthInfo.days;
const units = [
{
label: "w",
value: dayOfWeekName
},
{
label: "mo",
value: monthInfo.name,
progress: mo_progress
},
{
label: "d",
value: day,
progress: d_progress
},
{
label: "h",
value: hr > 12 ? hr - 12 : hr,
progress: h_progress
},
{
label: "m",
value: min < 10 ? "0" + min : min,
progress: m_progress
},
{
label: "s",
value: sec < 10 ? "0" + sec : sec
},
{
label: "ap",
value: hr > 12 ? "PM" : "AM"
}
];
// flush out the timeouts
this.ringTimeouts.forEach(t => {
clearTimeout(t);
});
this.ringTimeouts = [];
// update the display
units.forEach(u => {
// rings
const ring = this.el.querySelector(`[data-ring="${u.label}"]`);
if (ring) {
const strokeDashArray = ring.getAttribute("stroke-dasharray");
const fill360 = "progress-clock__ring-fill--360";
if (strokeDashArray) {
// calculate the stroke
const circumference = +strokeDashArray.split(" ")[0];
const strokeDashOffsetPct = 1 - u.progress;
ring.setAttribute(
"stroke-dashoffset",
strokeDashOffsetPct * circumference
);
// add the fade-out transition, then remove it
if (strokeDashOffsetPct === 1) {
ring.classList.add(fill360);
this.ringTimeouts.push(
setTimeout(() => {
ring.classList.remove(fill360);
}, 600)
);
}
}
}
// digits
const unit = this.el.querySelector(`[data-unit="${u.label}"]`);
if (unit)
unit.innerText = u.value;
});
}
clearTimeout(this.updateTimeout);
this.updateTimeout = setTimeout(this.update.bind(this),1e3);
}
}Final Output Of Clock With Progress Bar Style
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Now we have completed our Clock With Progress Bar Style. Here is our updated output with Html, Css, and JavaScript. Hope you like the Clock progress bar. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you!
In this post, we learn how to create a Clock With a Progress Bar Style Using HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by – Code With Random/Anki
Code by – Jon Kantner
