Как сделать коло с помощю css html?

Question

Как сделать коло с помощью css html?

Мне нужно именно кола рамки радиус, то есть вот так как на фото как сделать? То есть сам процент заполнения эта белая штучка

Answer 1

const radius = 37.5;
const total_length = 2 * Math.PI * radius;
const one_eighth = total_length / 8;
console.log('Полная длина пути:', total_length);
console.log('Одна восьмая:', total_length - one_eighth);

body {
    margin: 0;
    padding: 0;
}

svg {
    background-color: #fdca06;
    height: 100vh;
    display: block;
}

.animate-circle {
    animation: animate-circle 5s infinite;
}

@keyframes animate-circle {
    from {
        stroke-dashoffset: 235.61944901923448
    }
    to {
        stroke-dashoffset: 0
    }
}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle
        cx="50"
        cy="50"
        r="37.5"
        stroke-width="25"
        stroke="#252524"
        fill="none"
    />
    <circle
        cx="50"
        cy="50"
        r="37.5"
        transform-origin="center"
        transform="rotate(-90)"
        stroke-width="25"
        stroke-dasharray="235.61944901923448"
        stroke-dashoffset="206.16701789183017"
        stroke="#ffffff"
        fill="none"
        class="animate-circle"
    />
</svg>

БЛОГ НА HUSL

Как сделать коло с помощю css html?

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