Javascript 如何设置div上背景色填充的动画

我正在处理一个自定义角度组件，该组件当前看起来如下所示：

您在左侧看到的小绿色部分是我尝试使用一个单独的

div

重叠，这样当我单击其中一个白色圆形选择器时，绿色会一直填充到该点

以下是我的代码：

var shell=document.querySelector（'.shell'）；
var inner=document.querySelector（'.inner shell'）；
shell.addEventListener（'click'，函数（ev）{
警报（“in”）；
if（ev.path&&ev.path[0]。类名=='indicator'）{
var targetNode=ev.src元素；
var centerX=targetNode.offsetLeft+targetNode.offsetWidth；
var centerY=targetNode.offsetTop+targetNode.offsetHeight；
internal.style.width=`${centerX+40}px`；
}
});
。内壳{
背景色：#6FBC92；
宽度：50px；
过渡：1s；
}
.贝壳{
背景色：#DCDC；
边界半径：20px；
显示：内联flex；
}
.指标{
背景色：#FFFFFF；
边框：1px实心#FFFFFF；
边界半径：20px；
高度：13px；
利润率：3px28px；
宽度：13px；
}
您可以使用
线性渐变
，下面是一个可以调整的简化示例：


var shell=document.querySelectorAll（'.container div'）；
对于（变量i=0；i div{
高度：30px；
宽度：30px；
边界半径：50%；
背景：#fff；
}
您可以将
内壳
置于
壳
内，并使用
位置：绝对
在指示器上重叠

请参阅代码片段：


var shell=document.querySelector（'.shell'）；
var inner=document.querySelector（'.inner shell'）；
shell.addEventListener（'click'，函数（ev）{
if（ev.path&&ev.path[0]。类名=='indicator'）{
var targetNode=ev.src元素；
var centerX=targetNode.offsetLeft+targetNode.offsetWidth；
var centerY=targetNode.offsetTop+targetNode.offsetHeight；
internal.style.width=`${centerX+40}px`；
}
})；
.shell.内部shell{
背景色：#6FBC92；
宽度：10px；
过渡：1s；
位置：绝对位置；
排名：0；
左：0；
显示：内联块；
身高：100%；
边界半径：20px；
}
.贝壳{
背景色：#DCDC；
边界半径：20px；
显示：内联flex；
位置：相对位置；
}
.指标{
背景色：#FFFFFF；
边框：1px实心#FFFFFF；
边界半径：20px；
高度：13px；
利润率：3px28px；
宽度：13px；
位置：相对位置；
z指数：111；
}

如何将
内壳
放在
指示器
下面？我需要能够随时点击任何
指示器
，以便重新定位滑块。@User5842使用z-index向前移动指示器，查看我的更新这很完美！谢谢！