Q-Clocks

Experiment

by Felipe Alfaro

HTML

<div q-clocks="500" q-time="5s, 2s, 4s, 2s" q-wave="">  
</div>

SCSS

@keyframes q-clock-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.q-clocks {
  
  div.q-clocks-group {
    
    &:after,
    &:before {
      content: '';
      display: block;
      clear: both;
    }    
    
    div.q-clock {
      display: block;
      width: 30px;
      height: 30px;
      border: solid 1px #bbb;
      border-radius: 50%;
      position: relative;
      margin: 2px;
      float: left;

      > div.q-hand {
        display: block;
        width: 1px;
        height: calc(50% - 4px);
        position: absolute;
        left: calc(50% - 0.5px);
        top: 4px;
        background: #bbb;
        transform-origin: bottom left;
        animation-name: q-clock-spin;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
      }
    }
  }
}

JavaScript

var clockWrappers = document.querySelectorAll('[q-clocks]');

Array.prototype.forEach.call(clockWrappers, function (clockWrapper) {
	var count = Number(clockWrapper.getAttribute('q-clocks')),
  		group = document.createElement('div'),
      timeConfig = clockWrapper.getAttribute('q-time');
      
  clockWrapper.innetHTML = '';
  clockWrapper.classList.add('q-clocks');
  group.className = 'q-clocks-group';
  
  if (count > 0) {
  
    var maxTimeLoop = 0,
        timeLoop = 0,
        current = 0;
  
  
    if (timeConfig) {
    	timeConfig = timeConfig.split(',');
      maxTimeLoop = timeConfig.length - 1;
    }
    while (current < count) {
    	group.innerHTML = group.innerHTML + (
				'<div class="q-clock"><div class="q-hand"' + (timeConfig ? ' style="animation-duration: ' + timeConfig[timeLoop] + '"' : '') + '></div></div>'
      );
      if (timeLoop === maxTimeLoop) {
      	timeLoop = 0;
      }
      else {
      	timeLoop += 1;
      }
      current ++;
    }
    clockWrapper.appendChild(group);
  }
});