Minimalist Analog Clock With jQuery And CSS3

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.

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.

  • Publication date: 08.04.2018
  • Source