Индикатор выполнения, но маркер сверху панели ⇐ CSS

[Anonymous]

Я застрял над этой задачей на пару часов. Перепробовал много вещей, включая расчеты, но не могу воссоздать этот макет. Мне удалось это сделать, но маркер встроен в панель, и с помощью
Возможно ли это в CSS? Или есть другие подходы, которые вы могли бы предложить? Это часть отчета в формате HTML, поэтому цифры не будут динамически меняться. Но при рендеринге отчета маркер должен перемещать индикатор выполнения и следовать цвету градиента, на котором он находится.
Будем очень благодарны за любую помощь.
Мокап изображения
Это то, что у меня есть сейчас.

Код: Выделить всё

body {
display: flex;
align-items: center;
justify-content: center;
}
/* Container styling */

.progress-container {
display: flex;
align-items: center;
gap: 10px;
}
/* Progress bar container */

.progress-bar {
position: relative;
height: 10px;
width: 300px;
background: linear-gradient(to right, #ff00ff, #00f0ff, #00ff99);
border-radius: 5px;
}
/* Progress fill */

.progress {
position: relative;
height: 100%;
background-color: transparent;
/* No color needed as the full gradient is in the parent */
z-index: 1;
}
/* Marker styling */

.marker {
position: absolute;
top: -6px;
/* Adjust to lift it above the bar */
right: -7px;
/* Positions at the end of the progress */
width: 15px;
height: 15px;
background: inherit;
/* Inherit the gradient color */
border-radius: 50%;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
z-index: 2;
/* Ensures the marker is above the progress bar */
}
/* Text styling */

.progress-text {
background-color: black;
color: white;
padding: 5px 10px;
border-radius: 20px;
font-weight: bold;
}










15%

Подробнее здесь: https://stackoverflow.com/questions/791 ... of-the-bar