13
Окт
2021

подскажите как доделать прогресс бар на svg

Как сделать такой рейтинг или прогресс бар? я начал делать его на svg но как правильно его реализовать я не знаю. нужно что бы это выглядело как прогресс бар, или что то наподобие рейтинга, который должен может кто знает как такое реализовать

circle.default {
    stroke: #e8e8e8;
    fill: transparent;
    stroke-width: 10;
    stroke-dasharray: 80 24.5;
    transform-origin: 50% 50%;
    transform: rotate(154deg);
}
<svg class="progress-bars" width="500" height="500">
    
    
    

<circle class="default" cx="250" cy="250" r="200" stroke-linecap="round"></circle>
    
  
<circle class="default" cx="250" cy="250" r="200" stroke-linecap="round" style="
    stroke: #e91e63;
    stroke-dasharray: 80 6000;
"></circle><circle class="default" cx="250" cy="250" r="200" stroke-linecap="round" style="
    stroke: #e91e63;
    stroke-dasharray: 80 6000;
    transform: rotate(
184deg);
"></circle><circle class="default" cx="250" cy="250" r="200" stroke-linecap="round" style="
    stroke: #e91e63;
    stroke-dasharray: 43 6000;
    transform: rotate(
214deg);
"></circle><line x1="0" y1="500" x2="500" y2="500" style="stroke: rgb(255 255 255);stroke-width: 304px;"></line><circle class="" cx="250" cy="250" r="170" stroke-linecap="round" fill="#464646"></circle></svg>

Источник: https://ru.stackoverflow.com/questions/1338054/%D0%BF%D0%BE%D0%B4%D1%81%D0%BA%D0%B0%D0%B6%D0%B8%D1%82%D0%B5-%D0%BA%D0%B0%D0%BA-%D0%B4%D0%BE%D0%B4%D0%B5%D0%BB%D0%B0%D1%82%D1%8C-%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B5%D1%81%D1%81-%D0%B1%D0%B0%D1%80-%D0%BD%D0%B0-svg

Тебе может это понравится...

Добавить комментарий