Подскажите, есть необходимость в реализации индикатора загрузки слайда как указано на картинки, (За одну сек по периметру серого круга должен загрузиться желтый круг, сверху над ним) Возможно ли это реализовать не меняя html раскладку ?
body {
background-color: #00f;
}
.slick-active:before {
background-color: #fff;
}
.slick-dots {
position: absolute;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
display: flex;
flex-direction: row;
justify-content: center;
z-index: 3;
background: none;
font-size: 0;
}
.slick-dots li {
position: relative;
margin: 0 5px;
box-sizing: border-box;
font-size: 0;
border-radius: 50%;
cursor: pointer;
background-image: radial-gradient(circle, transparent 60%, #767a85 67%, #767a85 100%);
width: 26px;
height: 26px;
}
.slick-dots li:before {
position: absolute;
top: 50%;
left: 50%;
width: 8.67px;
height: 8.67px;
border-radius: 100px;
border: 2px solid #fff;
content: "";
opacity: 1;
transform: translate(-50%, -50%);
box-sizing: border-box;
}
button {
font-size: 0;
background: none;
border: none;
}
<ul class="slick-dots" role="tablist" style="">
<li class="" role="presentation"><button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 2" tabindex="-1">1</button></li>
<li role="presentation" class="slick-active"><button type="button" role="tab" id="slick-slide-control01" aria-controls="slick-slide01" aria-label="2 of 2" tabindex="0" aria-selected="true">2</button></li>
</ul>Пришла идея с анимацией радиального градиента, (на before, after) но не в курсе как её сделать. Сложность задачи именно что б не менять html. А так бы реализовывал через svg и анимацию stroke-dashoffset
