Geek Answers Handbook

How to rotate the upper border around a circle?

I am trying to achieve this CSS animation but don't know how to do it. I want to rotate the upper border around the circle, but it all rotates, including the text. I just want to rotate the upper bound 360 degrees. Below is the 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! Truly appreciate your help with this. Thanks in advance!

+5
source share
2 answers

 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>
+2
source

The solution is to make another div, which will be behind .circle with position:absolute; that how it will "take" the size of the .circle , but does not contain the content of the .circle .

 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>
+3
source

More articles:


All Articles