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.

"elapsed" mode:

years, months, days ::

"remaining" mode:

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: