How to rotate top-border around the circle?

Question

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 1

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>

Answer 2

The solution is to make another div that will be behind the .circle with position:absolute; that how, it will "take" the .circle size but not contains the .circle 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>