Minimalist Analog Clock With jQuery And CSS3

A dead simple jQuery plugin which helps you render a minimalist analog clock on the webapp using CSS3 2D transform properties (translate and rotate). Fully customizable via CSS.

How to use it:

1. Place jQuery JavaScript library and the jQuery Clock.js plugin in the html page.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<link rel="stylesheet" href="css/clock.css">
<script src="js/jquery.clock.js"></script>

2. Create a container where you want o place the analog clock.

<div id="clock"></div>

3. Render an analog clock inside the container.

$(document).ready(function(){
  $('#clock').clock();
});

4. Customize the analog clock by overriding the default styles in the clock.css

#clock {
  position: relative;
  width: 140px;
  height: 140px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 30px solid #93cf93;
  margin: auto;
}

#clock:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #93cf93;
  top: 50%;
  left: 50%;
  transform: translate(-10px, -10px); /* Regola Standard */
  -ms-transform: translate(-10px, -10px); /* Internet Explorer */
  -moz-transform: translate(-10px, -10px); /* Firefox */
  -webkit-transform: translate(-10px, -10px);/* Safari e Chrome*/
  -o-transform: translate(-10px, -10px); /* Opera */
}

#secondi, #ore, #minuti {
  position: absolute;
  width: 140px;
  height: 140px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

#secondi:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 65px;
  background: #93cf93;
  left: 69px;
  top: 5px;
}

#ore:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 40px;
  background: #93cf93;
  left: 60px;
  top: 30px;
}

#minuti:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 55px;
  background: #93cf93;
  left: 65px;
  top: 15px;
}

---

This awesome jQuery plugin is developed by MicheleDeF. For more Advanced Usages, please check the demo page or visit the official website.