{% if lighthouse %}
<div class="progress progress-circular flex"> <div><h4>Qualite</h4></div> <div> <ul> {% for index in indexes %} {% assign score = index | times: 100 | round %} <li data-name="{{ indexesname[forloop.index0] }}" data-percent="{{ score }}%"> {% if score > 85 %}{% assign color = 'top' %}{% elsif score > 75 %}{% assign color = 'verygood' %}{% elsif score > 60 %}{% assign color = 'good' %}{% elsif score > 40 %}{% assign color = 'bad' %}{% else %}{% assign color = 'verybad' %}{% endif%} <svg viewbox="-10 -10 220 220" class="{{ color }}"> <g fill="none" stroke-width="15" transform="translate(100,100)"> <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" /> <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" /> <path d="M 86.6,50 A 100,100 0 0,1 0,100" /> <path d="M 0,100 A 100,100 0 0,1 -86.6,50" /> <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" /> <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" /> </g> </svg> <svg viewbox="-10 -10 220 220"> <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="{{ 630 | times: index }}"></path> </svg> </li> {% endfor %} </ul> </div> </div> {% endif %}