Comment/message loading css spinner

HTML

<div class="spinner-outer">
    <div class="spin"></div>
</div>

CSS

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

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

.spinner-outer {
    border:1px solid black;
    width:60px;
    height:60px;
    margin:18px 0 0 1px; 
    border-radius:0% 50% 0 50%;
    background: url(https://app.dinametro.com/images/apps/temp/2/2017-01-19/15027818-1130701220377225-5932402423649744901-n.png) no-repeat;
    background-size: cover;
 
}

.spin{
    border:6px solid black;
    width:50%;
    height:50%;
    margin:14% auto;
    border-radius:50%;
    border-bottom-color:transparent;
    border-top-color:transparent;
     -webkit-animation-name: rotate; 
  -webkit-animation-duration: 800ms; 
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
    
  animation-name: rotate; 
  animation-duration: 800ms; 
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}