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 m

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

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><divclass="spinner"><iclass="fa fa-anchor"></i></div>

Solution 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);
  }
}

<linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"rel="stylesheet"/><divclass="test"><divclass="spinner-circle"><divclass="spinner"></div><iclass="icon fa fa-anchor"></i></div></div>

Solution 3:

Here's my go

HTML

<divclass="loader-container"><span>icon</span><divclass="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-containerspan {
    position: absolute;
    top: 45%;
    left: 45%;
 }

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

Codepen