Full progress sphere

Looking for some assistance with a circular progress component code that I have been working on. Despite my efforts, the circle is not completing when hovered over. Any suggestions on how to make it work would be greatly appreciated.

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>

htmlcss

Answer №1

When hovering over the orange circle, only three out of four 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;
}

The missing left border should be included as well:

.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;
}

Alternatively, all four borders can be combined into a single 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;
}

Answer №2

Change the border color on the left side of a button when hovering over it. (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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am experiencing issues with my images not appearing on my Laravel website despite trying various solutions found online. The images upload successfully but fail to display on the site

I'm facing an issue where the image uploads correctly but does not display. Is there something missing in my code? <div class="col-md-4"> <img class="img img-fluid img-thumbnail" src="/storage/profile_images/{{$prof ...

phphtmllaravelimage

Storing user input from Vue.js in a JavaScript array for future use

Utilizing vue.js <template> <input id="email" v-model="email" type="text" placeholder="Email"> <input id="name" v-model="name" type="text" placeholder=" ...

javascripthtmlvue.js

Encountering a problem with the divLogoBlock element in the code snippet below

I am experiencing an issue with the code below. The divLogoBlock does not appear when I copy and paste the entire page into Outlook as a signature. I believe there may be a problem with the CSS. Can someone please assist me? <html lang="en"><he ...

htmlcss

Div's external dimension not being computed

I am attempting to calculate the overall height of the div content in order to expand the sticky-container and create the appearance that the image is tracking the user. Unfortunately, using outerHeight does not seem to be effective for some reason. While ...

javascriptjqueryhtmlcss

What is the best way to remove this .click function?

My goal is to create a switch function where clicking the "on" button changes its CSS, and if the user then clicks on the "off" button, the CSS returns to normal. I also need the switch to default to the "on" position, but my attempts so far have been unsu ...

javascriptjqueryhtmlcss

What is the best way to extract the text from a <div> tag and show it in a different div when clicked on using ng click in AngularJS?

When the button is clicked, the text in ng-model=name should be displayed in the <h2> tag. <div ng-model="name">This is a text</div> <button ng-click="getname()">Click</button> <h2>{{name}}</h2> ...

jqueryhtmlangularjsangularjs-directiveangularjs-scope

Emphasize identical terms in AngularJS through bold formatting

I am facing a situation where I need to apply bold formatting to specific words in an HTML string (editorData) using AngularJS, based on whether they match certain keywords (data or dataArray). It is important to note that the case of the words in editorD ...

jqueryhtmlangularjs

What is the best way to keep the menu bar in place as you scroll?

Can someone help me figure out how to keep the menu bar fixed at the top of the page when the user scrolls down? I've tried various methods but haven't had any luck. Any assistance would be greatly appreciated. Here is the CSS code: And here is ...

htmlcssmenumenubar

What is the functionality of the keydown event?

Whenever the input text value is not empty, I want my .removetext div to be displayed, but it's not working correctly. When I type something after the second character, my .removetext gets hidden, but it shouldn't be hidden when the input is not ...

javascriptjqueryhtmlcss

Avoid automatically scrolling to the top of the page when a link is clicked

Within my ASP.NET MVC 5 application, there exists a partial view containing the following code: <a href="#" onclick="resendCode()" class="btn btn-link btn-sm">Resend</a> Additionally, on the View, the resendCode() function is present: funct ...

javascripthtmlasp.net-mvc

Problem with CSS: In Chrome, text fields have 3px additional margin-right

https://i.sstatic.net/I8mzi.jpg I am facing an issue with the margins of my text fields. Even though I have set a margin-right of 5px for each field, Google Chrome seems to be adding an additional 3-4px automatically. This problem is evident when I dynami ...

javascriptjqueryhtmlcssgoogle-chrome

While using Nav, it is necessary to adjust the height of the drop-down menu to accommodate the content when the sub-menu

My dropdown menu has multiple submenus, and I'm facing an issue where the submenu content overlaps the container when opened. I want the container to scale to the height of the submenu content when opening, and then reduce back when closing the submen ...

htmlcssdropdownbootstrap-5nav

Responsive HTML5 audio player adjusts size when viewed on mobile devices

I am facing a challenge with an HTML5 Audio player. It looks fine on desktop but behaves strangely on mobile devices. While the width remains intact, it repositions itself and floats over the element it is contained within. How can I prevent this repositio ...

htmlcssmobile-safarihtml5-audioaudio-player

Issue arises when the logo and navigation menu overlap upon zooming in

I'm facing a couple of issues with the menu on my website that I can't seem to resolve. The code appears to be correct, but the problem arises when a user zooms in on the website, particularly on netbooks. The website logo and the navigation menu ...

csshtmloverlap

Challenge encountered while attempting to implement grid system in ionic framework

I'm completely new to the world of ionic framework, and I really need some assistance in completing this view. Please see the image reference https://i.stack.imgur.com/WOBFw.png I have made an attempt at it with the following code: <div class ...

cssangularjstwitter-bootstrapionic-framework

Centering the logo using Material-UI's alignment feature

Need help centering a logo in my login form using Material-UI. Everything else is centered except for the logo, which is stuck to the left side of the card. I've tried adding align="center" and justify="center" under the img tag, but it's still ...

cssreactjsmaterial-ui

Hidden overflow and identification in URL causes content to be invisible and suddenly appear at the top of the page

I'm encountering a strange issue with containers that have overflow:hidden and when the page URL includes an id. The content gets pushed up and becomes invisible. This problem arises when I apply padding and negative margin at the bottom to create equ ...

javascriptcssoverflowhiddenpage-jump

Attempting to choose everything with the exception of a singular element using the not() function in Jquery

Within the mosaic (div #mosaique) are various div elements. My goal is to make it so that when I click on a specific div, like #langages or #libraries, the other divs become opaque while the selected div undergoes a size change (which works correctly in t ...

javascriptjqueryhtmlcssselector

Creating a competition schedule - pieces don't quite mesh

Having trouble getting my tournament bracket visuals to come together smoothly! Here is the CSS code I have: #tournament-holder{ width:708px; padding:20px 0 20px 15px; float:left; } .vertical-holder{ width:100px; padding-right:15px; float:left; } .horizo ...

phphtmlcss

Ways to change the CSS styling of the placeholder attribute within a textarea or input field tag

I am currently working on adjusting the font size of the text within the placeholder attribute of a textarea element. While I have been successful in achieving this using vanilla CSS, I have encountered difficulties when trying to implement the same concep ...

cssangularangular-material2