3

Как сделать такой рейтинг или прогресс бар? я начал делать его на 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>

2 ответа 2

3

Чтобы создать эффект прогресс бара, нужно сделать анимацию заполнения или закраски линий.

Вариант закраски пунктирной линии не решить с помощью только анимации stroke-dasharray и stroke-dashoffset, как это делается для сплошных линий.

Так как stroke-dasharray делит всю линию на сегменты и сдвигом с помощью stroke-dashoffset линия не будет рисоваться, будут просто двигаться сегменты.

Для анимации заполнения сегментов можно использовать маску.

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

.container {
width:50vw;
height:50vh;
}
circle.default {
    stroke: #e8e8e8;
    fill: transparent;
    stroke-width: 10;
    stroke-dasharray: 80 24.5;
    }
  circle.red {
  stroke: #E91E63;
    fill: transparent;
    stroke-width: 10;
  }
<div class="container">
<svg id="svg1" class="progress-bars" viewBox="0 0 500 500">
 <defs>
   <mask id="mask"> 
    <rect width="100%" height="100%" fill="white" />
   <circle  fill="none" stroke="black" stroke-width="10" stroke-dasharray="1256.6" stroke-dashoffset="1256.6" cx="250" cy="250" r="200" stroke-linecap="round">
     <animate attributeName="stroke-dashoffset" begin="svg1.click" dur="10s" values="1256.6;0" fill="freeze" />
   </circle>
   
   </mask>
 </defs> 
 <g transform="rotate(140 250 250)">
 <circle class="default red" cx="250" cy="250" r="200" stroke-linecap="round"></circle>
 <circle class="default" mask="url(#mask)" cx="250" cy="250" r="200" stroke-linecap="round"></circle> 
 </g>
   <line x1="0" y1="500" x2="500" y2="500" style="stroke: rgb(255 255 255);stroke-width: 214px;"></line>
  <circle class="" cx="250" cy="250" r="170" stroke-linecap="round" fill="#464646"></circle> 
 <text y="50%" x="50%" text-anchor="middle" fill="white" font-size="36px" font-family="sans-serif">Click me</text> 
</svg>
</div>

2

Если посмотреть внимательно на код первого ответа, то для получения дуги используется circle, низ которой экранирован линией с широкой строкой

<line x1="0" y1="500" x2="500" y2="500" style="stroke: rgb(255 255 255);stroke-width: 214px;"></line>

По большому счету это костыль, который проявится при изменении цвета фона.
Второй недостаток, если понадобится управлять анимацией с помощью input, то будет заметна задержка начала анимации, так как часть круга скрыта.

Чтобы избежать этого то лучше использовать для получения дуги Elliptical Arc (A,a)

Из формулы Arc видно, что нам нужны координаты начала и конца дуги. Радиусы будут равны 200px

введите сюда описание изображения

<path  d="M76.8,350 A200,200 0 1 1 423.2,350"  />

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" class="progress-bars" width="500" height="500" viewBox="0 0 1000 1000"> 
<path transform="rotate(3.5 250 250)" d="M76.8,350 A200,200 0 1 1 423.2,350" fill="none"  stroke="#e8e8e8"
stroke-width="10" stroke-dasharray = "80  24.75"
stroke-linecap="round"  /> 
</svg>

Далее всё, как в первом ответе: над дугой с красными секторами, размещена точно такая же дуга с серыми секторами. Маска применяется к верхней дуге и при перемещении маски, серые сектора прорезаются, показывая тем самым нижние, красные сектора.

Для управления анимацией добавлен input и вывод процентов выполнения

let total = velocity.getTotalLength(),
 input = document.querySelector("[type='range']"),
 txt = document.querySelector("#txt1");

input.addEventListener("input",()=>{  
  progress();  
})

window.addEventListener("load",()=>{  
  progress();  
})

function progress(){
  let val = Number(input.value);
  let dash = total * val / 100;
  let gap = total - dash;
  velocity.style.strokeDasharray = dash + " " + gap
txt.innerHTML = (val + "%"); 
}
.container {
width:50vw;
height:50vh;
}
<div class="container">
<div><input id="size" type="range" min="0" step="1" max = "100" value="0" /></div>
<svg id="svg1" class="progress-bars"  viewBox="0 0 500 500"> 
<defs>
 <mask id="mask"> 
    <rect width="100%" height="100%" fill="white" />
   <path id="velocity" fill="none"  stroke="black" stroke-width="10" stroke-dasharray ="0,838"     stroke-linecap="round" d="M76.8,350 A200,200 0 1 1 423.2,350" >
       </path>
</mask> 
</defs>

 <g transform="rotate(3.5 250 250)" >
  <path fill="none"  stroke="#e91e63" stroke-width="10" stroke-dasharray = "80  24.75" stroke-linecap="round" d="M76.8,350 A200,200 0 1 1 423.2,350" />
  <path mask="url(#mask)" fill="none" stroke="#e8e8e8" stroke-width="10" stroke-dasharray = "80  24.75" stroke-linecap="round" d="M76.8,350 A200,200 0 1 1 423.2,350" />
  </g> 
   <circle class="" cx="250" cy="250" r="170" stroke-linecap="round" fill="#464646"></circle> 
 <text id="txt1" y="50%" x="50%" font-family="sans-serif" text-anchor="middle" font-size="56px" fill="white">0% </text> 
</svg>  
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.