A CodePen by Joey Hoer. SVG Semi-Conical Gradient - SVG semi-conical gradient in CSS with SCSS

index.html

<div>
  <h1>L<span>o</span>ading</h1>

style.scss

@import "compass";
@function svg-donut($diameter, $size){
	$radius: $diameter/2;
	$inner-diameter: $diameter - $size;
	$inner-radius: $inner-diameter/2;
	@return '<path d="M#{$radius},#{$radius}m-#{$radius},0a#{$radius},#{$radius},0,0,1,#{$diameter},0,#{$radius},#{$radius},0,0,1-#{$diameter},0zM#{$radius},#{$radius}m-#{$inner-radius},0a#{$inner-radius},#{$inner-radius},0,0,0,#{$inner-diameter},0,#{$inner-radius},#{$inner-radius},0,0,0-#{$inner-diameter},0z"/>';
}
@mixin radial-gradient($apothem:10, $sides:10, $color:black){
  $height: $apothem;
  $width: 2*$height*tan((180 / $sides)*1deg);
  $size: $apothem*2/3.75;
  $fade: '<linearGradient id="fade" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#{$color};stop-opacity:1"/><stop offset="100%" style="stop-color:#{$color};stop-opacity:0"/></linearGradient>';
  $clip: '<clipPath id="clip">#{svg-donut(($apothem*2), $size)}</clipPath>';
  $group: '';
  /* The SVG animation crushed my CPU/RAM, so I'm using a CSS animation instead. *//*
  $animation: '<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 #{$apothem} #{$apothem}" to="360 #{$apothem} #{$apothem}" dur="1.5s" repeatCount="indefinite"/>'; /**/
  @for $i from 0 through $sides {
    $group: '#{$group}<path d="M#{$apothem - $width/2},0l#{$width},0-#{$width/2},#{$apothem}-#{$width/2}-#{$apothem}z" fill="#{$color}" fill-opacity="#{1/($sides/$i)}" transform="rotate(#{360/($sides/$i)} #{$apothem} #{$apothem})"/>';
  }
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0 #{$apothem*2},#{$apothem*2}"><defs>#{$fade}#{$clip}</defs><path d="M#{$apothem},#{$apothem}m0-#{$apothem}a#{$size/4},#{$size/4},0,0,1,0,#{$size/2}z" fill="#{$color}"/><g transform="rotate(#{-180/($sides)} #{$apothem} #{$apothem})" clip-path="url(#clip)">#{$group}</g></svg>');
}
span {
  @include radial-gradient(100, 180, #fff);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  animation: spin 1s linear infinite;
  display: inline-block;
  width:  0.8em;
  height: 0.8em;
  margin-bottom: -0.03em;
  color: transparent;
  overflow: hidden;
}
@keyframes spin { to { transform: rotate(360deg) translatez(0); } }

/**
 * Other Junk
 */
@import url(http://fonts.googleapis.com/css?family=Varela+Round);
html, body { width: 100%; height: 100%; }
body {
  font-family: 'Varela Round', sans-serif;
  text-transform: uppercase;
  color: #fff;
  background-color: #666;
  display: table;
}
div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
h1 {
  font-size: 4em;
  margin: 0;
  font-weight: 400;
  /* EXTRA PULSE ANIMATION *//*
  animation: pulse 3s linear infinite;
  transform: scale(0.98);
  /**/
}
@keyframes pulse { 50% { transform: scale(1.02); } }