{% if moz %} <div class=“progress progress-circular flex”>
<div><h4>Position</h4></div> <div> <ul> {% if site.data %} {% assign moz = site.data.[website].moz[datelastcrawl] %} {% else %} {% assign moz = [website].moz[datelastcrawl] %} {% endif %} {% for authority in moz %} {% for element in authority limit: 2 %} {% assign score = element[1] | times: 1 %} <li data-name="{{ element[0] }}" data-percent="{{ score }}"> {% if score > 60 %}{% assign color = 'top' %}{% elsif score > 50 %}{% assign color = 'verygood' %}{% elsif score > 30 %}{% assign color = 'good' %}{% elsif score > 15 %}{% 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="{{ score | times: 630 | divided_by: 100 }}"></path> </svg> </li> {% endfor %} {% endfor %} </ul> </div>
</div> {% endif %}