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

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

<div class="spinner round animated"></div>
.spinner {
  padding: 50px;
  position: relative;
  text-align: center;
  
  &:before {
    content: '';
    height: 30px;
    width: 30px;
    margin: -15px auto auto -15px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-width: 8px;
    border-style: solid;
    border-color: #2180c0 #ccc #ccc;
  }
}

.spinner.round:before {
  border-radius: 100%;
}

.spinner.animated:before {
  animation: rotation .7s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  } to {
    transform: rotate(359deg);
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js