<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <svg class="svg" width=200 height=200> <circle cx=100 cy=100 r=50 /> </svg> </div>

body { background: #444; height: 100%; width: 100%; display: flex; justify-content: center; } .svg { margin-top: 25%; display: block; animation: svg-rotate 8000ms linear infinite; } circle { fill: transparent; stroke: #c0392b; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0, 301.59289; animation: stroke-dash 2000ms linear infinite, stroke-width 2000ms linear infinite, stroke-color 8000ms steps(4) infinite; } @keyframes svg-rotate { to { transform: rotate(360deg); } } @keyframes stroke-width { 0%, 100% { stroke-width: 0; } 45%, 55% { stroke-width: 2; } 50% { stroke-width: 4; } } @keyframes stroke-dash { 0% { stroke-dasharray: 0, 301.59289; stroke-dashoffset: 0; } 50% { stroke-dasharray: 301.59289, 0; stroke-dashoffset: 0; } 100% { stroke-dasharray: 301.59289, 301.59289; stroke-dashoffset: -301.59289; } } @keyframes stroke-color { from { stroke: #e74c3c; } }