/clock-face

:clock4: A web component for building clock faces

Primary LanguageJavaScript

Clock Face

A web component for building clocks, inspired by the clock that appears on Moment.js' home page.

clock face

Demo

Live demo.

Usage

Include the component's JS/CSS, and then use the <clock-face> element.

<link rel="stylesheet" href="clock-face.css">
<script src="clock-face.js"></script>

<clock-face></clock-face>

The <clock-face> element displays the current time by default. You can alternatively display a static time using the hour, minute, and second attributes.

<clock-face hour="9" minute="30" second="10"></clock-face>

Dependencies

The component requires a custom elements polyfill, either Polymer's or Andrea Giammarchi's; I recommend the latter, as it's lightweight and does everything the <clock-face> element needs.

Browser Support

  • IE 9+
  • Firefox
  • Chrome
  • Safari
  • Opera
  • iOS Safari
  • Android Browser
  • Chrome for Android

IE versions < 9 are not supported because the component relies on CSS transformations.