<progress></progress>
progress {
  width: 5em;
  height: 5em;
  background: url("data:image/svg+xml,%3csvg viewBox='-5 -5 10 10' xmlns='http://www.w3.org/2000/svg'%3e%3cstyle%3esvg%7banimation:r 1.4s linear infinite%7d%40keyframes r%7bto%7btransform:rotate(270deg)%7d%7dcircle%7banimation:d 1.4s ease-in-out infinite%7d%40keyframes d%7b50%25%7btransform:rotate(135deg)%3bstroke-dashoffset:8%7dto%7btransform:rotate(450deg)%7dfrom%2cto%7bstroke-dashoffset:28%7d%7d%3c/style%3e%3ccircle fill='none' stroke-dasharray='30' stroke-dashoffset='8' stroke='%234285f4' r='4'/%3e%3c/svg%3e"); 
}

/* Remove default browser styles */
progress { border: 0 }
progress::-moz-progress-bar { background: none }
progress::-webkit-progress-bar { display: none }
progress::-ms-fill { animation-name: none }

/* Centers the spinner */
html, body { height: 100%; }
body {
   display: flex;
   align-items: center;
   justify-content: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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