Aisha Salman Aisha Salman - 3 months ago 12
CSS Question

How to rotate top-border around the circle?

I'm trying to achieve this CSS animation but don't know how to do it. I want to rotate the top-border around the circle but the whole thing is rotating including text. I just want to rotate the top-border on 360 degree. Here is my code snippet below:



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 {
height: 120px;
width: 120px;
border: 5px solid #ccc;
border-top-color: orange;
border-radius: 60px;
background-color: #74002f;
/*Making the top border to spin*/
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;
}


/*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="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>





Please help me out! Will really appreciate your help in this.Thank you in advance!

Answer

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 {
  height: 120px;
  width: 120px;
  border: 5px solid #ccc;
  border-top-color: orange;
  border-radius: 50%;
  background-color: #74002f;
  /*Making the top border to spin*/
  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;
}
/*Animation on circle*/

@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; /* (120px width + 5+5px border )/2  */
  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>