A Pen by Saminou yengue kizidi.

index.html

<h1>Supersimple and minimal clock</h1>

<h2>Columns</h2>

<div class="clock col">
  
  <div class="ore"></div>
  <div class="min"></div>
  <div class="sec"></div>

</div>

<h2>Linear</h2>

<div class="clock lin">
  
  <div class="ore"></div>
  <div class="min"></div>
  <div class="sec"></div>

</div>

<!-- div id="debug"></div -->

script.js

function updClock(){
  
  //reset
  $('.ore').empty();
  $('.min').empty();
  $('.sec').empty();
  
  //start
  var currentdate = new Date(); 
  
  //vars
  var h = currentdate.getHours();
  var m = currentdate.getMinutes();
  var s = currentdate.getSeconds();
  
  //debug
  $('.debug').html('Ora: '+h+' '+m+' '+s);
  
  //ore  
  var hs, ms, ss;
  
  for (var i=0;i<h;i++){ 
    $('.ore').append('<div class="i"></div>');
  }
  
  //min  
  for (var i=0;i<m;i++){ 
    $('.min').append('<div class="i"></div>');
  }
  
  //sec  
  for (var i=0;i<s;i++){ 
    $('.sec').append('<div class="i"></div>');
  }
  
  setTimeout(updClock, 1000);
  
}

updClock();

style.less

#debug{
  background: #ccc;
  position: fixed;
  right: 10px;
  top: 10px;
  padding: 10px;
  line-height: 30px;
}

h1, h2{
  margin: 1%;
  clear:both;
}

@item : 14px;

.clock{
  width: 100%;
}

.col{
  .ore, .min, .sec{
    float: left;
    width: 30%;
    margin: 1%;
    height: (@item*2*6);
  }
  
  .i{
    margin: @item/2;
    width: @item;
    height: @item;
  }
}

.lin{
  .ore, .min, .sec{
    float: left;
    width: 98%;
    margin: 1%;
    height: @item*2
  }
  
  .i{
    margin: 0.3%;
    width: 1%;
    height: @item;
  }
}

.i{
  float: left;
  background: #ddd;
  border-radius: 50%;
  
  .ore &{
    background: #2c3e50;
  }
  
  .min &{
    background: #e67e22;
  }
  
  .sec &{
    background: #c0392b;
  }
}

Superflat-superminimal-bullet-clock.markdown

Superflat superminimal bullet clock

A super flat and minimal clock whit 3 columns - hours, mins and secs - updated in javascript and jQuery

A Pen by Saminou yengue kizidi on CodePen.

License.