如何在微调器

Question

如果我能够自由地修改html，我就能做到这一点，但问题是我只能使用这个特定的布局来制作这个微调器。

我想制作的微调器是这样的，

粉红色的旋转器在灰色路径周围走动，中间的图标保持静止。

问题是我必须让上面的微调器才能使用这个html布局

只有div

<div class="spinner"></div>

在里面加上一个图标。

<div class="spinner">
 <i class="mickey"></i>
</div> 

图标字体或图像可用于中间的图标。

编辑：链接到JSFiddle

Answer 1

像这样可能

.test {
  display: inline-block;
  padding: 20px;
}
.spinner-circle {
  width: 50px;
  height: 50px;
  position: relative;
  margin: 20px;
}
.spinner {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  border: 5px solid rgba(0,0,0,0.3);
  border-right: 5px solid red;
  animation: rotate--spinner 1.6s linear infinite;
  box-sizing: border-box;
}
.icon {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  font-size: 50px;
}

@keyframes rotate--spinner {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="test">
  <div class="spinner-circle">
    <div class="spinner"></div>
    <i class="icon fa fa-anchor"></i>
  </div>
</div>

Answer 2

在这里，您可以尝试使用pseudo selector :before,:after或declaring another div为spinner尝试此操作，如LGSon所示，您所做的就是您已在{{1}上应用了transform:rotate这就是parent div整个rotating的原因，请尝试如下，

＆＃13;

＆＃13;

div

＆＃13;

.spinner{
  width:100px;
  height:100px;
  border-radius:50%;
  border:10px solid #111;
  margin:10% 40%;
  position:relative;
  z-index:1;
}
.spinner:before{
  content:'';
  width:100px;
  height:100px;
  border-radius:50%;
  border-top:10px solid #ccc;
  border-right:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:10px solid transparent;
  position:absolute;
  z-index:9;
  top:-10px;
  left:-10px;
  animation:rt 2s infinite;
}
@keyframes rt{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}
.spinner > .fa{
  font-size:32px;
  text-align:center;
  display:block;
  margin:30% 0;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

我来了

HTML

<div class="loader-container">
    <span>icon</span>
    <div class="loader"></div>
</div>

CSS

 .loader {
    border: 16px solid #f3f3f3;
    /* Light grey */
    border-top: 16px solid #3498db;
    /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
 }

 .loader-container {
    position: relative;
    display: inline-block;
 }

 .loader-container span {
    position: absolute;
    top: 45%;
    left: 45%;
 }

 @keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
 }

Codepen