How to distribute color in sets one by one

Question

I made a xiaomi clock for my practice, but there is one problem, I can not make a color set. I want to spread the white color in the dial one by one , and this happens with the triangle and the opacity of the dial.

Here is what I want to get IMG: -

Video: - https://vimeo.com/262815342

Codepen

var clock = "";

for(var i = 0; i < 360; i++){
	clock += "<div id='dials'><div id='cutline'></div></div>";
}
//clock += "<div id='circle'></div>";
clock += "<div id='dot'></div>";
clock += "<div id='mline'></div>";
clock += "<div id='hline'></div>";
clock += "<div id='tringleM'><div id='tringle'></div><div class='shadow'></div></div>";

document.getElementById('container').innerHTML = clock;

for (var i = 1; i <= 360; i++) {
	document.querySelector('#dials:nth-child('+i+')').style.transform = "rotate("+ (i-1) +"deg)";
}

/* Real Time Clock */
var hour, min, lol, lol1, lol2, second;

second = moment().second() * 6;

setInterval( function(){ 
//var min = moment().minutes()
//console.log("min:-"+min);
hour = moment().hours();
//console.log("hour:-"+hour);
//var time = moment();
//console.log(time);
min = moment().minutes() * 6;
//console.log(min);
hour = moment().hours() % 12 / 12 * 360 + (min / 12);
//console.log(hour);
lol = document.getElementById('mline').style.transform = "rotate("+ ( 180 + min ) + "deg)";
//console.log(lol);
lol1 = document.getElementById('hline').style.transform = "rotate("+ ( 180 + hour ) + "deg)";
//console.log(lol1);

}, 1000);


setInterval(function(){
	second++;
	lol2 = document.getElementById('tringleM').style.transform = "rotate("+ (180 + second ) + "deg)";
}, (60/360)*1000);

body{
  background-color: white;
}
#container{
  position: relative;
  width: 420px;
  height: 420px;
  padding: 10px;
  background-color: #4682B4;
  transform: scale(1.44);
  transform-origin: 0 0;
}
#dials{
  position: absolute;
  top: 40px;
  left: 50%;
  width: 1px;
  height: 180px;
  transform-origin: bottom center;
}
#cutline{
  background-color: white;
  width: 1px;
  height: 20px;
  opacity: 0.5;
}
#img{
  position: absolute;
  top: 15px;
  left: 20px;
  width: 600px;
}
#circle{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 150px);
  border: 1px solid white;
}
#dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  margin: -10px;
  left: 50%;
  top: 50%;
  border: 5px solid white;
  background: #4682B4;
  z-index: 1001;
}
#mline, #hline{
  position: absolute;
  top: calc(50% - 1px);
  left: calc(50% - 1px);
  width: 2px;
  height: 140px;
  background-color: white;
  transform-origin: top center;
  transform: rotate(180deg);
}
#hline{
  height: 70px;
  opacity: 0.6;
}
#tringle{
  width: 0;
  height: 0;
  position: absolute;
  top: 100%;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid white;
}
/*.shadow{
  height: 20px;
  width: 50px;
  position: absolute;
  bottom: -40%;
  left: calc(50% - 25px);
  transform-origin: top center;
  transform: rotate(180deg);
  background: red;
}*/
#tringleM{
  width: 20px;
  height: 140px;
  position: absolute;
  top: 50%;
  left: calc(50% - 10px);
  transform-origin: top center;
  transform: rotate(180deg);
  transition: all 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
<div id="container"></div>
<img id="img" src="https://i.stack.imgur.com/t7EkM.png">

Run codeHide result

Answer 1

Here is an idea by adding / removing a class that will increase opacity:

UPDATE

edited the code to use spaninstead div, so I can easily use it nth-of-typewithout problems (since nth-childit won’t work well due to other elements)

var clock = "";

for(var i = 0; i < 360; i++){
	clock += "<span id='dials'><div id='cutline'></div></span>";
}
//clock += "<div id='circle'></div>";
clock += "<div id='dot'></div>";
clock += "<div id='mline'></div>";
clock += "<div id='hline'></div>";
clock += "<div id='tringleM'><div id='tringle'></div><div class='shadow'></div></div>";

document.getElementById('container').innerHTML = clock;

for (var i = 1; i <= 360; i++) {
	document.querySelector('#dials:nth-child('+i+')').style.transform = "rotate("+ (i-1) +"deg)";
}

/* Real Time Clock */
var hour, min, lol, lol1, lol2, second;

second = moment().second() * 6;

setInterval( function(){ 
//var min = moment().minutes()
//console.log("min:-"+min);
hour = moment().hours();
//console.log("hour:-"+hour);
//var time = moment();
//console.log(time);
min = moment().minutes() * 6;
//console.log(min);
hour = moment().hours() % 12 / 12 * 360 + (min / 12);
//console.log(hour);
lol = document.getElementById('mline').style.transform = "rotate("+ ( 180 + min ) + "deg)";
//console.log(lol);
lol1 = document.getElementById('hline').style.transform = "rotate("+ ( 180 + hour ) + "deg)";
//console.log(lol1);


}, 1000);


setInterval(function(){
	second++;
	lol2 = document.getElementById('tringleM').style.transform = "rotate("+ (180 + second ) + "deg)";
  document.querySelector('#container span:nth-of-type('+((second-5)%360 +1)+') #cutline').classList.add('one');
  document.querySelector('#container span:nth-of-type('+((second -30 + 360)%360 +1)+') #cutline').classList.remove('one');
  
}, (60/360)*1000);

body{
  background-color: white;
}
#container{
  position: relative;
  width: 420px;
  height: 420px;
  padding: 10px;
  background-color: #4682B4;
  transform: scale(1.44);
  transform-origin: 0 0;
}
#dials{
  position: absolute;
  top: 40px;
  left: 50%;
  width: 1px;
  height: 180px;
  transform-origin: bottom center;
}
#cutline{
  background-color: white;
  width: 1px;
  height: 20px;
  opacity: 0.5;
  transition:1s;
}
#cutline.one {
  opacity:1;
  transition:0s;
}
#img{
  position: absolute;
  top: 15px;
  left: 20px;
  width: 600px;
}
#circle{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 150px);
  border: 1px solid white;
}
#dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  margin: -10px;
  left: 50%;
  top: 50%;
  border: 5px solid white;
  background: #4682B4;
  z-index: 1001;
}
#mline, #hline{
  position: absolute;
  top: calc(50% - 1px);
  left: calc(50% - 1px);
  width: 2px;
  height: 140px;
  background-color: white;
  transform-origin: top center;
  transform: rotate(180deg);
}
#hline{
  height: 70px;
  opacity: 0.6;
}
#tringle{
  width: 0;
  height: 0;
  position: absolute;
  top: 100%;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid white;
}
/*.shadow{
  height: 20px;
  width: 50px;
  position: absolute;
  bottom: -40%;
  left: calc(50% - 25px);
  transform-origin: top center;
  transform: rotate(180deg);
  background: red;
}*/
#tringleM{
  width: 20px;
  height: 140px;
  position: absolute;
  top: 50%;
  left: calc(50% - 10px);
  transform-origin: top center;
  transform: rotate(180deg);
  transition: all 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
<div id="container"></div>
<img id="img" src="https://i.stack.imgur.com/t7EkM.png">

Run codeHide result