A web component for building clocks, inspired by the clock that appears on Moment.js' home page.
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
632D
hour, minute, and second attributes.
<clock-face hour="9" minute="30" second="10"></clock-face>
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.
- 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.