How to add a icon inside a spinner

问题

I'm able to do this if I'm able to freely modify the html, but the problem is I'm restricted to using a this one specific layout to make this spinner.

The spinner that I want to make is something like this,

There is the pink spinner which goes around and around the grey path and an icon in the middle which stays still.

The problem is I have to get the above spinner to work with just this html layout

Only a div

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

Div with an icon inside.

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

An icon font or an image can be used for the icon in the middle.

EDIT: Link to JSFiddle

回答1:

Here you could try this even using pseudo selector :before,:after or by declaring another div for spinner as shown by LGSon, what you did is that you have applied transform:rotate on parent div that's why it is rotating whole div, so try as below,

.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;
}

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

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

回答2:

Like this maybe

.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>

回答3:

Here's my go

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

来源：https://stackoverflow.com/questions/43179950/how-to-add-a-icon-inside-a-spinner