CSS Анимация индикатора загрузки градиентом?

Question

Подскажите, есть необходимость в реализации индикатора загрузки слайда как указано на картинки, (За одну сек по периметру серого круга должен загрузиться желтый круг, сверху над ним) Возможно ли это реализовать не меняя 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

БЛОГ НА HUSL

CSS Анимация индикатора загрузки градиентом?

Ответы (0 шт):