Как сделать круглыми полоска рейтинга?

Question

[Manvel]

Вот сейчас у меня так: https://codepen.io/Undefend/pen/PoeJMJW

А должен быть так:

А еще если можно помогите сделать то что на втором стрелочке

Comments

[ThunderCat]

а это прям обязательно на свг сделать? ЦСС никак не подойдет?

[black1277]

Вот попробуй, отцентровать цифры если надо сам сможешь

.pacss__svg circle {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear;
    stroke: #666;
    stroke-width: 1em;
    stroke-linecap: round;
}
.pacss__wrapper:after {
    position: absolute;
    display: block;
    height: 160px;
    width: 160px;
    left: 50%;
    top: 50%;
    content: "/ 5";
    margin-top: -70px;
    margin-left: -40px;
    border-radius: 100%;
    line-height: 160px;
    font-size: 1.5em;
    text-shadow: 0 0 0.5em black;
}
.pacss__wrapper:before {
    position: absolute;
    display: block;
    height: 160px;
    width: 160px;
    left: 50%;
    top: 50%;
    box-shadow: inset 0 0 1em black;
    content: attr(data-pct);
    margin-top: -80px;
    margin-left: -80px;
    border-radius: 100%;
    line-height: 160px;
    font-size: 2em;
    text-shadow: 0 0 0.5em black;
}

[Manvel]

black1277, Круто!
Спасибо)