W3Flints Clock-Timer

Renderers

HTML renderer

Use pure HTML and CSS to draw your clock.

HTML:

Javascript:

---

Progress bar renderer

Only works with a timer device, with a milestone after the current moment. Customizable with CSS.

HTML:

Javascript:

---

Analog renderer

Displays a clock face with hours, minutes and senconds. Customizable with CSS.

HTML:

Javascript:

CSS:

To customize the clock face, you can override it with CSS. Example:

.w3f-analog-face {
  background-image: url('../assets/analog-face-2.svg');
}

---

Polar renderer

Supports digits for months, days, hours, minutes, senconds, and milliseconds. Customizable with CSS.

HTML:

Javascript:

CSS:

To customize the polar clock components, you can override them with CSS. Example:

.w3f-polar-face{background-color: #000;}
.w3f-polar-face .n{stroke: #acc;}
.w3f-polar-face .d{stroke: #abc;}
.w3f-polar-face .H{stroke: #aba;}
.w3f-polar-face .h{stroke: #aca;}
.w3f-polar-face .i{stroke: #cba;}
.w3f-polar-face .s{stroke: #caa;}
.w3f-polar-face .m{stroke: #cab;}

---

Custom renderer

HTML:

Javascript: