Question 250417 in Html Question posted in
Some basic documentation can be found here.

Html – Complete progress circle

I have this below code for creating a circular progress component. However, it is not completing the circle when hovered over. Any ideas to achieve the same are welcome.

button {
    border: 6.429px #f1f1f1 solid;
    position: relative;
}

.current-step {
        font-size: 24.442px;
}
  
button::before,
button::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}

.spin {
    height: 66px;
    width: 65px;
}

.spin::before,
.spin::after {
    top: -6px;
    left: -5px;
}

.spin::before {
    border: 6.429px solid transparent;
}

.spin:hover::before {
    border-top-color: #f90;
    border-right-color: #f90;
    border-bottom-color: #f90;
    transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-      bottom-color 0.15s linear 0.2s;
}

.spin:hover::after {
    border: 0 solid transparent;
}

.spin::after {
    //  border-top: 6.429px solid #F90;
    border-left-width: 6.429px;
    border-right-width: 6.429px;
    transform: rotate(200deg);
    transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}

.circle {
    border-radius: 100%;
    box-shadow: none;
}

.circle::before,
.circle::after {
    border-radius: 100%;
    height: 66px;
    width: 65px;
}
<button class="spin circle"><span class="current-step">1</span>/<span>5</span></button>
Tags:

2

Answers


  1. 0

    just add border left color when you hover on button. (in .spin:hover::before)

    button {
    border: 6.429px #f1f1f1 solid;
    position: relative;
}

.current-step {
        font-size: 24.442px;
}
  
button::before,
button::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}

.spin {
    height: 66px;
    width: 65px;
}

.spin::before,
.spin::after {
    top: -6px;
    left: -5px;
}

.spin::before {
    border: 6.429px solid transparent;
}

.spin:hover::before {
    border-top-color: #f90;
    border-right-color: #f90;
    border-bottom-color: #f90;
     border-left-color: #f90;   //add left border color here
    transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-      bottom-color 0.15s linear 0.2s;
}

.spin:hover::after {
    border: 0 solid transparent;
}

.spin::after {
    //  border-top: 6.429px solid #F90;
    border-left-width: 6.429px;
    border-right-width: 6.429px;
    transform: rotate(200deg);
    transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}

.circle {
    border-radius: 100%;
    box-shadow: none;
}

.circle::before,
.circle::after {
    border-radius: 100%;
    height: 66px;
    width: 65px;
}
    <button class="spin circle"><span class="current-step">1</span>/<span>5</span></button>
    Login or Signup to reply.
  2. 0

    The orange circle (on hover) is a border, and only 3/4 of the borders are given a color:

    .spin:hover::before {
  border-top-color: #f90;
  border-right-color: #f90;
  border-bottom-color: #f90;
  transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}

    You forgot the left border:

    .spin:hover::before {
  border-top-color: #f90;
  border-right-color: #f90;
  border-bottom-color: #f90;
  border-left-color: #f90;
  transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}

    Or just combine all 4 into 1 rule:

    .spin:hover::before {
  border-color: #f90;
  transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search