99 CSS Clock Plugins

Simple example of an analog clock using mainly HTML, CSS and JScript :) .....
clock

Analog clock using canvas .....
clock

Following the tutorial from w3schools to create a functioning analog clock with canvas. .....
clock

A text-based clock that maps the current time to natural-language strings with a minimalistic analog clock face. The time mechanism rebases itself after every tick (1s) to ensure it is as close as possible to 0ms past the second......
clock

SVG Analog Clock animated using @Snapsvg (the elastic easing gives the second needle that vintage effect) .....
clock

Analog Clock written in CSS3 using SASS + showing real time by JavaScript .....
clock

CSS/JS analog clock .....
clock

Working CSS3 analog clock, using CSS animations and shapes, without any images or JavaScript. This is now available on GitHub @ https://github.com/iliadraznin/CSS3clock .....
clock

Analog clock with html, css and js. Inspired by Moto 360 watchface design .....
clock

Simulation of simple analog clock in HTML with audio. .....
clock

My attempt at a simple analog clock. .....
clock

Analog Clock made with HTML5, CSS3 and Javascript. .....
clock

A simple, animated analog clock. .....
clock

Directly draggable at hour or minute hand of the analog-clock style timepicker. Touch devices are supported. .....
clock

A pretty clock made with html, css and some javascript to get the time and update the clock. Inspired by Zhu Sheng's work on dribble, check his work : .....
clock

A simple clock made with JS and CSS .....
clock

A CSS transforms and animations clock. Javascript used to handle & manipulate classes. Inspired by the Ham Yard Hotel Clock (https://www.youtube.com/watch?v=A-MxGvtK2Bk) .....
clock

Analog clock with neon style .....
clock

.....
clock

This is a hacked up HTML5 and JavaScript project that I have been wasting some time playing with. I took a basic JavaScript Analog Clock and made it fancy. Many options for style and other configuration. This is a WORK IN PROGRES.....
clock

Demonstration of an analog clock using the Web Animation API. Complete explanatory article .....
clock

A digital analog clock, inspired by A Million Times: https://www.youtube.com/watch?v=ExkVIQ60ClM .....
clock

For this analog clock, I used JavaScript only for getting the current time at load then used CSS animation to run the clock from there. .....
clock

Inspired by a widget seen on W3Schools. .....
clock

Simple analog clock utilizing CSS3 and a sprinkling of Javascript. .....
clock

.....
clock

Analog clock developed using HTML and CSS, no real need for JavaScript (this example uses JS to set the clock on time, something that can done on server side, but not for the clock to work). .....
clock

This is a simple analog clock created with a layered SVG. This clock also operates with JS. .....
clock

.....
clock

.....
clock

.....
clock

An analog clock that changes its background depending on the time of the day. I used linear icons to help indicate AM and PM time. See all the subtle changes one it 6pm. I used pure javascript for clock functionality. .....
clock

A tiny, real-time, responsive SVG clock, designed for an upcoming project. Code-mashed from several other pieces of work. Complete article .....
clock

Just wasting some time (no pun intended) seeing how easy it would be to make a clock. Turns out a lot easier than I thought. .....
clock

.....
clock

Lightweight analog clock. .....
clock

Analog Clock using CSS3 and JavaScript. .....
clock

A pure CSS analog clock (JS is only used to rotate the hands based on the current time). Hand crafted. Fully responsive. Enjoy! .....
clock

I've seen analog clocks and I've seen binary clocks here on codepen, but I'm pretty sure this is the first analog binary clock, I hope you'll like it! .....
clock

Using CSS animations and keyframes, and rotate() translation, here is a simple analog clock using just CSS. .....
clock

The responsive analog clock is something I built a couple years back (see https://front-end-fu.com/2014/04/07/responsive-analog-clock-with-css3-and-javascript/). Recently, I wanted to tweak it so it was responsive relative to its.....
clock

.....
clock

Analog clock using ES6 and CSS animations. .....
clock

Simple CSS3 analog clock, made with CSS animations and 2D transformations. .....
clock

Finally got it working! Also check out my digital clock. Update 2019-02-08: removed jQuery .....
clock

analog clock and complete date .....
clock

.....
clock

This is a 24 hours analogic clock. It can show some events and even by used as a classical 12 hours clock if configured to do so (by changing a parameter). .....
clock

A simple digital clock. .....
clock

An original quick pen of a 3D digital clock concept with RxJS and CSS variables for #3December .....
clock

A digital clock that reads your computer's time and displays it in a pretty way. .....
clock

A digital clock inspired by some typography in the GameCube BIOS. No IE support. .....
clock

Switch from White to Black theme. .....
clock

An isometric digital clock made with Isomer .....
clock

This tutorial will show you how to create a digital clock with HTML, CSS and Javascript using only three lines of code. .....
clock

digital clock, css, js and that stuff .....
clock

Digital clock and date using ES6, styled to look like my old alarm clock in high school. .....
clock

css digital clock display, might animate it at some point but that would probably use javascript .....
clock

The digits are all done in pure CSS (linear-gradient + multiply backgrounds) Hope you like it. Using JS only to make it show the correct time. .....
clock

Pure CSS3 Digit Clock without images & javascript .....
clock

.....
clock

inspired from Black [ DD ] theme .....
clock

Just a little digital clock based on CSS3 box-shadows and some jQuery .....
clock

.....
clock

.....
clock

Digital clock display using CSS (rather than font - just for kicks). .....
clock

Wanted to create a old school digital display clock using css. I wanted the transitions between numbers to be fluid, so I didn't want to use a font. .....
clock

.....
clock

Digital clock face. .....
clock

Javascript emulation of a digital clock's logic, using predefined arrays representing the on-off state of each segment in every number. .....
clock

Two different angular directives containing two types of digital clocks. Use however you please .....
clock

.....
clock

.....
clock

css3 and jquery digital clock. .....
clock

Converting number to lines. 24h clock format. It's updated using object literal. Tips on structuring functions from: http://learn.jquery.com/code-organization/beware-anonymous-functions/ .....
clock

Flat clocks made with SVG & CSS3 which shows current time. .....
clock

.....
clock

All of the workings of the analogue and digital clock are coded in CSS. The only JS is to initially set the clock to the computer's time. .....
clock

A minimalistic digital clock made using css3 and jquery. Time, Day obtained using moment.js library. .....
clock

Digital clock with BassCSS colors Best in full-screen .....
clock

.....
clock

A simple clock with digital segments. Made in React for fun. Leverages the randomcolor JavaScript library for different, randomly colored segments. .....
clock

This a digital clock for showing the time (surprising, right? :D ). Wonky CSS still included! TODO: 1.) Remove Jquery .....
clock

Canvas Digital Clock with Bitmapped Font && Animated Rainbow Hues .....
clock

A digital clock is made by flip cards .....
clock

.....
clock

A simple Javascript digital clock. .....
clock

Simple Digital Clock with Vue.js .....
clock

http://jsdo.it/tetsuwo/eriy?Flickr?????????? @author Tetsuwo OISHI @twitter http://twitter.com/tetsukamp .....
clock

AngularJS instant search example demo .....
clock

.....
clock

This is a digital clock created mainly using javascript. .....
clock

A minimal analog / digital clock made during my learning time with Vue.js 2 .....
clock

.....
Flip Card

Lost interest, may revisit eventually. Uses JS/css transforms to align the clock hands and weather api with angular for the current/local weather .....
Weather

Inspired by this shot: https://dribbble.com/shots/2236793-Vintage-Flip-Clock I decided to add a radio button because I love any excuse to use some old timey radio .....
Radio Button

A quick css copy of https://www.instagram.com/p/BVEcuWcFKwq/ ... not a 100% percent equal, but it has a working clock. .....
Cards

Uses :before and :after pseudo-elements plus CSS transforms and animations to create a clock from a single div. .....
Loading

.....
3D Text Effect