Rotate only the Border using CSS [duplicate] - html

Question

This question already has an answer here:
CSS Animated Circles - Stop center content from rotating
(1 answer)
Closed 6 years ago.
I'm trying to rotate only the border using css but the font-icon is also rotating. How do I stop the rotation of the icon and make only the border?
CSS:
.circle {
width: 100px;
height: 100px;
background: transparent;
border-radius: 50%;
border: 2px dashed #000;
-webkit-animation-name: Rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: Rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: Rotate;
-ms-animation-duration: 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
.play {
padding: 20px 30px;
font-size: 56px;
}
#-webkit-keyframes Rotate
{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
#-moz-keyframes Rotate
{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
#-ms-keyframes Rotate
{
from{-ms-transform:rotate(0deg);}
to{-ms-transform:rotate(360deg);}
}
HTML:
<div class="circle">
<div class="play"><i class="fa fa-play"></i></div>
</div>
Where am I going wrong with this code?
DEMO JSFIDDEL

Answer 1

rotating parent will rotate child as well so it's better to style border separately like here
.circle {
width: 100px;
height: 100px;
position: relative;
}
.circle .border {
/* content: ''; */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: transparent;
border-radius: 50%;
border: 2px dashed #000;
-webkit-animation-name: Rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: Rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: Rotate;
-ms-animation-duration: 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
.play {
padding: 20px 30px;
font-size: 56px;
}
.stop {
font-size: 12px;
padding: 30px;
text-align: center;
}
#-webkit-keyframes Rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes Rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-ms-keyframes Rotate {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
<div class="circle">
<div class="border"></div>
<div class="play"><i class="fa fa-play"></i>
</div>
</div>
<p>
PS: The icon loading is a bit slow. Wait until it shows up.
</p>
<div class="circle">
<div class="border"></div>
<div class="stop">Stop me please</div>
</div>

Answer 2

<div class="button-container">
<i class="fa fa-play button-icon"></i>
<div class="button-border"></div>
</div>
You may find an updated version of your sample here
JSFiddle