Полный круг прогресса ⇐ Html

[Гость]

У меня есть приведенный ниже код для создания компонента циклического прогресса. Однако при наведении на него круг не завершается. Приветствуются любые идеи по достижению того же.

button { граница: 6,429 пикселей #f1f1f1 сплошная; положение: относительное; } .текущий-шаг { размер шрифта: 24,442 пикселей; } кнопка::перед, кнопка::после { размер коробки: наследовать; содержание: ''; позиция: абсолютная; ширина: 100%; высота: 100%; } .вращаться { высота: 66 пикселей; ширина: 65 пикселей; } .spin::перед, .spin::after { верх: -6 пикселей; слева: -5 пикселей; } .spin::before { граница: 6,429 пикселей, сплошная прозрачная; } .spin:hover::before { цвет верхней границы: #f90; правая граница цвета: #f90; цвет нижней границы: #f90; переход: border-top-color 0,15 с линейный, border-right-color 0,15 с линейный 0,1 с, border-bottom-color 0,15 с линейный 0,2 с; } .spin:hover::after { граница: 0 сплошная прозрачная; } .spin::after { // граница сверху: 6,429 пикселей, сплошная #F90; ширина левой границы: 6,429 пикселей; ширина границы справа: 6,429 пикселей; преобразование: поворот (200 градусов); переход: преобразование 0,4 с линейные 0 с, ширина левой границы 0 с линейные 0,35 с, -webkit-transform 0,4 с линейные 0 с; } .круг { граница-радиус: 100%; коробка-тень: нет; } .круг::перед, .circle::after { граница-радиус: 100%; высота: 66 пикселей; ширина: 65 пикселей; 1/5