SVG spinner

In this example below you will see how to do a SVG spinner with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by karbonik, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright karbonik ©
  • HTML
  • CSS
  • JavaScript
    <div id="svg" style="width:100px; height:100px; margin: 100px auto;">
    <svg class="spinner" viewBox="0 0 80 80">
        <circle cx="40" cy="40" r="38" />
    </svg>
</div>


/*Downloaded from https://www.codeseek.co/karbonik/svg-spinner-XEXVjN */
    $spinnerSize: 80;

svg.spinner {
    width: $spinnerSize + px;
    height: $spinnerSize + px;
    
    .ie &,
    .edge & {
        animation: spinner-ie 1.25s linear infinite;
        transform-origin: (0.5px * $spinnerSize) (0.5px * $spinnerSize) 0;
        stroke-dasharray: 107,38;
    }

    circle {
        fill: transparent;
        stroke: #3187ff;
        stroke-width: 4;
        stroke-linecap: round;
        
        .not-ie & {
            stroke-dasharray: (3.14 * $spinnerSize);
            transform-origin: (0.5px * $spinnerSize) (0.5px * $spinnerSize) 0;
            animation: spinner 2s linear infinite;
        }
    }
}

@keyframes spinner {
    0% {
        transform: rotate(0deg);
        stroke-dashoffset: (0.66 * $spinnerSize);
    }

    50% {
        transform: rotate(720deg);
        stroke-dashoffset: (3.14 * $spinnerSize);
    }
    100% {
        transform: rotate(1080deg);
        stroke-dashoffset: (0.66 * $spinnerSize);
    }
}


.over {
    width: $spinnerSize + px;
    height: $spinnerSize + px;
    animation: spinner 2s linear infinite;
    transform-origin: (0.5px * $spinnerSize) (0.5px * $spinnerSize) 0;
    
    circle {
        fill: transparent;
        stroke: #3187ff;
        stroke-width: 4;
        stroke-linecap: round;
        
    }
    stroke-dasharray: 107,38;
}

@keyframes spinner-ie {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
    


/*Downloaded from https://www.codeseek.co/karbonik/svg-spinner-XEXVjN */
    // Get IE or Edge browser version
var version = detectIE();

if (version === false) {
  document.getElementById('svg').className += ' not-ie';
} else if (version >= 12) {
  document.getElementById('svg').className += ' edge edge' + version;
} else {
  document.getElementById('svg').className += ' ie ie' + version;
}

/**
 * detect IE
 * returns version of IE or false, if browser is not Internet Explorer
 */
function detectIE() {
  var ua = window.navigator.userAgent;

  // Test values; Uncomment to check result …

  // IE 10
  // ua = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)';
  
  // IE 11
  // ua = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko';
  
  // Edge 12 (Spartan)
  // ua = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0';
  
  // Edge 13
  // ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586';

  var msie = ua.indexOf('MSIE ');
  if (msie > 0) {
    // IE 10 or older => return version number
    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
  }

  var trident = ua.indexOf('Trident/');
  if (trident > 0) {
    // IE 11 => return version number
    var rv = ua.indexOf('rv:');
    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
  }

  var edge = ua.indexOf('Edge/');
  if (edge > 0) {
    // Edge (IE 12+) => return version number
    return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
  }

  // other browser
  return false;
}

Comments