What is the best way to rotate the top border in a circular fashion?

I need assistance achieving a specific CSS animation. My goal is to rotate the top-border around the circle without rotating the whole element, including the text. I simply want the top-border to rotate 360 degrees. Here's the code snippet I'm currently working with:

 // Your CSS Code Here 
 <!-- Your HTML Code Here -->

If anyone could provide guidance on this issue, it would be greatly appreciated. Thank you in advance for your help!

htmlcssanimation

Answer №1

div#skill {
  background-color: rgba(144, 0, 64, 0.8);
  color: #fff;
  padding: 10px 0;
}
div#skill h3 {
  color: #fff;
  text-transform: none;
}
div#skill .row {
  margin-right: -15px;
  margin-left: -15px;
  padding: 15px 150px;
}
div#skill .circle {
  height: 120px;
  width: 120px;
  border: 5px solid #ccc;
  border-top-color: orange;
  border-radius: 50%;
  background-color: #74002f;
  animation: spin 2s linear infinite;
}
div#skill .circle:after {
  content: url(../img/icons/arrow-point-to-right.png);
  position: absolute;
  top: 25px;
  right: 0;
}
div#skill .circle.last:after {
  display: none;
}
.circle .caption {
  font-weight: bold;
  padding: 20px 24px;
}
.caption h6 {
  font-size: 15px;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.col-md-3 {
  position: relative;
}
.caption {
  position: absolute;
  z-index: 10;
  text-align: center;
  left: 65px; 
  transform: translate(-50%, 0);
}
<div id="skill">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h3>My development process</h3>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3">
        <div class="caption text-center">
          <h6>1</h6>
          <h6>Concept</h6>
        </div>
        <div class="circle">
        </div>
      </div>
      <div class="col-md-3">
        <div class="caption text-center">
          <h6>2</h6>
          <h6>Design</h6>
        </div>
        <div class="circle">
        </div>
      </div>
      <div class="col-md-3">
        <div class="caption text-center">
          <h6>3</h6>
          <h6>Code</h6>
        </div>
        <div class="circle">
        </div>
      </div>
      <div class="col-md-3">
        <div class="caption text-center">
          <h6 class="text-center">4</h6>
          <h6 class="text-center">Launch</h6>
        </div>
        <div class="circle last">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <h3>about my skills</h3>
      </div>
      <div class="col-md-6">

      </div>
    </div>
  </div>
</div>

Answer №2

To resolve the issue, create an additional div that will be positioned behind the .circle using position:absolute;. This way, it will adopt the size of the .circle without containing its content.

div#skill {
  /*background: url(../img/white.jpg) center no-repeat;
  background-size: cover;*/
  background-color: rgba(144, 0, 64,0.8);
  color: #fff;
  padding: 10px 0;
}

div#skill h3 {
  color: #fff;
  text-transform: none;
}

div#skill .row {
  margin-right: -15px;
  margin-left: -15px;
  padding: 15px 150px;
}

div#skill .circle {
  position:relative;
  height: 120px;
  width: 120px;
  border: 5px solid #ccc;
  /*border-top-color: orange;*/
  border-radius: 50%;
  background-color: #74002f;
}

div#skill .circle:after {
  content: url(../img/icons/arrow-point-to-right.png);
  position: absolute;
  top: 25px;
  right: 0;
}

div#skill .circle.last:after{
  display: none;
}

.circle .caption {
  font-weight: bold;
  padding: 20px 24px;
  position:relative;
  z-index:1; 
}

.caption h6 {
  font-size: 15px;
}

.circle-rotate {
  height: 100%;
  width: 100%;
  border-top: 5px solid orange;
  border-radius: 60px;
  background-color: #74002f;
  /*Making the top border to spin*/
  animation: spin 2s linear infinite;
  position:absolute;
  top:0;
  left:0;
}

/*Animation on circle*/
@keyframes spin {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
<div id="skill">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h3>My development process</h3>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3">
        <div class="circle">
          <div class="circle-rotate"></div>
          <div class="caption text-center">
            <h6>1</h6>
            <h6>Concept</h6>
          </div>
        </div>  
      </div>
      <div class="col-md-3">
        <div class="circle">
          <div class="caption text-center">
            <h6>2</h6>
            <h6>Design</h6>
          </div>
        </div> 
      </div>
      <div class="col-md-3">
        <div class="circle">
          <div class="caption text-center">
            <h6>3</h6>
            <h6>Code</h6>
          </div>
        </div> 
      </div>
      <div class="col-md-3">
        <div class="circle last">
          <div class="caption text-center">
            <h6 class="text-center">4</h6>
            <h6 class="text-center">Launch</h6>
          </div>
        </div> 
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <h3>about my skills</h3>
      </div>
      <div class="col-md-6">

      </div>
    </div>
  </div>
</div>

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

Discover additional and subtract options

I am trying to implement a "See more" and "See less" button functionality for my list items inside an unordered list using the code below, but it is not working as intended. $(document).ready(function() { var list = $(".partners__ul li"); var numTo ...

javascriptjqueryhtml

Disregard the instructions upon loading the page

I've implemented a directive to automatically focus on the newest input field added to my page. It works well, but there is one issue - when the page loads, the last input is selected by default. I want to exclude this behavior during page load and in ...

javascripthtmlangularjs

Highlighting the active nav-item in Bootstrap-5 is proving to be a challenge

I'm having trouble with the Bootstrap navbar. I want to change the color of the active nav-link, but it's not working as expected. I am currently using Bootstrap-5. Below is the CSS code I have: .nav-link { color: #666777; font-weight: 4 ...

htmlcssbootstrap-5

What is the best method for extracting and storing search suggestions data with selenium?

Initially, I had posted this inquiry before, and my apologies for reposting. However, I am still struggling to comprehend why the code works for the individual who responded but not for me. How can one retrieve values from search suggestions after enterin ...

pythonhtmlcssselenium

What is the best way to constrain the ratio of a full-width image display?

I am in need of a solution for displaying an image at full width inside a frame with a 16:9 aspect ratio. The image needs to be centered within the frame and adjust responsively when resizing the screen. My preference is to achieve this using just CSS. ...

htmlcss

Creating a Unique CSS Grid Border with Custom Images

I have a client project using nextjs and the design calls for a component with a custom border on a responsive CSS grid. I've successfully created the CSS grid with all the necessary content, but I'm struggling to add the required border as per t ...

htmlcssnext.jscss-grid

Is there a way to transfer table data from one table to another table using AngularJS?

I have a situation where I need to transfer data from one table to another. There are four buttons available: Right, AllRight, Left, and AllLeft. When the Right button is clicked, only the selected row should move to the left side table. When the AllRight ...

javascriptangularjshtml

Steps to automatically navigate to a specific Div upon page initialization

Can someone help me understand why my code is scrolling to a div and then returning back to the top of the page? $("#Qtags").click(function(){ $('html, body').animate({'scrollTop' : $($(this).attr('href')).offset().top}, ...

javascriptjqueryhtml

`Erase content from a field once text is typed into a different field`

I have a Currency Converter with two input fields and a button. I enter the amount to be converted in the first field, and the result of the conversion appears in the second field. My question is: How can I automatically clear the second field when I type ...

javascriptc#htmljquerycss

What is the reason behind asp:Textbox occasionally appending "text" to the CSS class in the final HTML output?

Here's the code snippet: <asp:TextBox ID="txtAddress" CssClass="s175" runat="server" MaxLength="30" placeholder="Street"></asp:TextBox> After rendering, it looks like this: <input name="ctl00$LeftColumnContent$txtAddress" type="text" ...

asp.netcss

Looking for Angular 2 material components for dart with CSS styling? Need help centering a glyph on your page?

HTML: <div class="border"> <glyph class="center" [icon]="'star'" ></glyph> <div class="centerText"> This Is Text that is centered. </div> </div> Css: .centerText{ text-align: center ...

htmlcssangulardartangular2-material

Step-by-step guide on embedding an HTML navigation menu into an index.html file and ensuring that the CSS styles are correctly applied to the loaded menu

Currently, I am in the process of studying Bootstrap, jQuery, and React with the aim of loading my navigation menu from a separate file called menu.html into my main file index.html. The script I am using for this task is: function codeAddress() { docum ...

jqueryhtmlcssreactjsbootstrap-4

Tips on incorporating dynamically appended table rows from javascript post button click in asp.net

After dynamically adding rows based on the selected number, I am facing issues with retrieving data from these rows when trying to submit it to the database. Upon Button Click, only the header row predefined in the HTML file is returned. Is there a way to ...

javascriptc#jqueryhtmlasp.net

What is the best way to eliminate the border color on a drop-down menu's bottom border?

I need help removing the border color from a dropdown with the style border-bottom: 1px solid rgba(0, 0, 0, 0.42); After debugging, I discovered that it is originating from the class MuiInput-underline-2593. However, the CSS class MuiInput-underline-2593 ...

javascripthtmlcssreactjsmaterial-ui

The onClick event is not executing my function

Having trouble triggering the onclick() event when trying to modify table data using ajax. Here's the code snippet: (the onclick() event is located in the last div tag) @{ ViewBag.Title = "Edit_Room"; Layout = "~/Views/Shared/_LayoutAdmin.csh ...

jqueryhtmlasp.net-mvconclickasp.net-ajax

Enhancing the padding of submit buttons in Mac OS X

I'm struggling to apply padding to a submit button. I have created a simple example in a JSFiddle: http://jsfiddle.net/yxr197pa/1/ Below is the code for it: HTML: <input type="submit" value="Submit" /> CSS: input { padding: 20px; } I ...

htmlcssinputpadding

PHP column number not found

Seeking assistance with a puzzling situation I encountered. My website features a form for administrators to submit user information, including links. The challenge lies in the uncertainty of how many links will be submitted - it could range from 5 to 35. ...

phphtmlmysql

Is Next.js experiencing issues with animating presence specifically for exit animations?

I'm facing an issue with adding an exit animation to my components in next js. Despite setting an initial animation, the exit animation doesn't seem to work as expected. Could someone please help me figure out what I'm doing wrong here? Be ...

javascriptcssreactjsnext.jsframer-motion

Flexbox - Consistent height image columns

I'm working on a basic flexbox layout that looks something like this: html,body { margin:0; padding:0; } body { height:100%; width:100%; } .panel-grid { -webkit-align-items: flex-start; ...

htmlcssflexbox

Enhance User Experience with a Multi Step Form incorporating a Progress Bar, designed with jQuery and CSS3. Resolve issues with

I downloaded a similar "Multi Step Form with Progress Bar using jQuery and CSS3". I managed to display the fieldsets with divs for additional forms or images, so showing the content in the fieldset is not an issue. However, the problem lies with the actua ...

jqueryhtmlcssprogress-bar