如何在div上动画化背景色的填充

Question

I am working on a custom Angular component that currently looks like the following:

The small green portion that you see on the left is my attempt to have a separate div overlap so that when I click on one of the white circular selectors, the green is filled up until that point.

Here is the code I have:

 var shell = document.querySelector('.shell'); var inner = document.querySelector('.inner-shell'); shell.addEventListener('click', function(ev) { alert("in"); if (ev.path && ev.path[0].className === 'indicator') { var targetNode = ev.srcElement; var centerX = targetNode.offsetLeft + targetNode.offsetWidth; var centerY = targetNode.offsetTop + targetNode.offsetHeight; inner.style.width = `${centerX + 40}px`; } }); 

 .inner-shell { background-color: #6FBC92; width: 50px; transition: 1s; } .shell { background-color: #DCDCDC; border-radius: 20px; display: inline-flex; } .indicator { background-color: #FFFFFF; border: 1px solid #FFFFFF; border-radius: 20px; height: 13px; margin: 3px 28px; width: 13px; } 

 <div class="inner-shell"> <div class="shell"> <div class="indicator"></div> <div class="indicator"></div> <div class="indicator"></div> <div class="indicator"></div> <div class="indicator"></div> <div class="indicator"></div> <div class="indicator"></div> <div class="indicator"></div> </div> 

Here is what I am getting with the code above (I clicked on the last indicator to get to this state):

How can I instead place inner-shell on top of the shell but still underneath the indicators ?

Thanks

Answer 1

You can use linear-gradient , here is a simplified example that you can adjust:

 var shell = document.querySelectorAll('.container div'); for(var i=0;i<shell.length;i++) { shell[i].addEventListener('click', function(ev) { var centerX = ev.target.offsetLeft - ev.target.parentNode.offsetLeft + 15; ev.target.parentNode.style.backgroundSize =centerX+'px 100%'; }); } 

 .container { margin:5px auto; height:30px; width:300px; border-radius:30px; background-image:linear-gradient(green,green); background-position:left; background-size:0px 100%; background-repeat:no-repeat; background-color:grey; display:flex; justify-content:space-around; transition:1s all; } .container > div { height:30px; width:30px; border-radius:50%; background:#fff; } 

 <div class="container"> <div></div><div></div><div></div><div></div> </div> 

Answer 2

You can put the inner-shell inside shell and use position:absolute to make overlap on the indicators

See code snippet:

 var shell = document.querySelector('.shell'); var inner = document.querySelector('.inner-shell'); shell.addEventListener('click', function(ev) { if (ev.path && ev.path[0].className === 'indicator') { var targetNode = ev.srcElement; var centerX = targetNode.offsetLeft + targetNode.offsetWidth; var centerY = targetNode.offsetTop + targetNode.offsetHeight; inner.style.width = `${centerX + 40}px`; } }); 

 .shell .inner-shell { background-color: #6FBC92; width: 10px; transition: 1s; position: absolute; top: 0; left: 0; display: inline-block; height: 100%; border-radius: 20px; } .shell { background-color: #DCDCDC; border-radius: 20px; display: inline-flex; position: relative; } .indicator { background-color: #FFFFFF; border: 1px solid #FFFFFF; border-radius: 20px; height: 13px; margin: 3px 28px; width: 13px; position:relative; z-index:111; } 

 <div class="shell"> <div class="indicator"></div> <div class="indicator"></div> <div class="indicator"></div> <div class="indicator"></div> <div class="indicator"></div> <div class="indicator"></div> <div class="indicator"></div> <div class="indicator"></div> <div class="inner-shell"></div> </div>