CodePen

HTML

            
              
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>AJAX Wheel Demo</title>
	<script type="text/javascript" src="ajaxScript.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="runAnimation()">

	<div class="wheel">
		<svg
		   xmlns:dc="http://purl.org/dc/elements/1.1/"
		   xmlns:cc="http://creativecommons.org/ns#"
		   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
		   xmlns:svg="http://www.w3.org/2000/svg"
		   xmlns="http://www.w3.org/2000/svg"
		   version="1.1"
		   width="200"
		   height="200"
		   id="svg2">
		  <title
		     id="title3795">ajaxWheel</title>
		  <defs
		     id="defs4" />
		  <metadata
		     id="metadata7">
		    <rdf:RDF>
		      <cc:Work
		         rdf:about="">
		        <dc:format>image/svg+xml</dc:format>
		        <dc:type
		           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
		        <dc:title>ajaxWheel</dc:title>
		      </cc:Work>
		    </rdf:RDF>
		  </metadata>
		  <g
		     transform="translate(0,-852.3622)"
		     id="layer1">
		    <path class="slice"
		       d="m 141.21873,917.00329 32.31485,-32.25 4.2875,4.80704 c 5.11484,5.73462 11.67924,16.94571 15.68341,26.7851 2.97146,7.30173 6.89551,24.26861 6.89551,29.81495 l 0,3.09291 -45.74806,0 -45.74806,0 32.31485,-32.25 z"
		       id="slice2"
		       style="fill:lightgrey;fill-opacity:1;stroke:none" />
		    <path class="slice"
		       d="m 140.4,987.75329 -32.48846,-32.5 46.24423,0 46.24423,0 0,3.09292 c 0,6.19137 -4.20468,23.61353 -7.70048,31.90708 -3.47655,8.24787 -11.70739,21.65071 -16.73458,27.25001 -1.35795,1.5125 -2.60569,2.75 -2.77274,2.75 -0.16706,0 -14.92355,-14.625 -32.7922,-32.50001 z"
		       id="slice3"
		       style="fill:lightgrey;fill-opacity:1;stroke:none" />
		    <path class="slice"
		       d="m 104.4,1005.6573 0,-45.89247 32.46345,32.45192 32.46344,32.45195 -3.21344,2.7903 c -14.70242,12.7663 -36.01693,22.0371 -53.96345,23.4714 l -7.75,0.6193 0,-45.8924 z"
		       id="slice4"
		       style="fill:lightgrey;fill-opacity:1;stroke:none" />
		    <path class="slice"
		       d="m 82.55018,1050.1303 c -6.08419,-1.0113 -18.70689,-5.1686 -24.65018,-8.1186 -5.82459,-2.891 -19.63873,-12.184 -22.22157,-14.9487 l -2.22157,-2.3781 32.47157,-32.46003 32.47157,-32.46004 0,45.74427 0,45.7442 -5.25,-0.1169 c -2.8875,-0.064 -7.65742,-0.5171 -10.59982,-1.0061 l 0,0 z"
		       id="slice5"
		       style="fill:lightgrey;fill-opacity:1;stroke:none" />
		    <path class="slice"
		       d="M 25.74131,1017.0277 C 17.96917,1008.814 9.98492,994.29928 6.05319,981.23625 3.64951,973.25012 0.79341,956.52655 1.68152,955.63844 1.90456,955.4154 22.6352,955.34999 47.74961,955.4931 l 45.66255,0.26019 -32.28622,32.27445 -32.28622,32.27446 -3.09841,-3.2745 z"
		       id="slice6"
		       style="fill:lightgrey;fill-opacity:1;stroke:none" />
		    <path class="slice"
		       d="m 1.9778,943.00329 c 1.00014,-9.23156 4.75897,-23.33119 8.30447,-31.15063 3.47192,-7.65714 12.64346,-21.89747 16.30806,-25.32094 l 2.37805,-2.22157 32.46004,32.47157 32.46004,32.47157 -46.29389,0 -46.29388,0 0.67711,-6.25 z"
		       id="slice7"
		       style="fill:lightgrey;fill-opacity:1;stroke:none" />
		    <path class="slice"
		       d="m 65.51445,912.86779 c -19.51186,-19.5188 -32.0952,-32.83662 -31.67226,-33.52096 1.76653,-2.85831 14.9928,-11.73234 24.05781,-16.14136 11.73653,-5.70838 21.90131,-8.68866 32.70809,-9.58991 l 7.79191,-0.64982 0,46.14378 c 0,25.37908 -0.1151,46.14377 -0.25577,46.14377 -0.14067,0 -14.82407,-14.57347 -32.62978,-32.3855 z"
		       id="slice8"
		       style="fill:lightgrey;fill-opacity:1;stroke:none" />
		    <path class="slice"
		       d="m 104.4,898.86342 0,-45.88599 7.38199,0.66894 c 8.90754,0.80718 19.6502,3.68232 29.11319,7.79179 7.87566,3.42014 21.73599,12.26996 25.46486,16.2593 l 2.46003,2.63188 -32.21003,32.21004 -32.21004,32.21004 0,-45.886 z"
		       id="slice1"
		       style="fill:lightgrey;fill-opacity:1;stroke:none" />
		  </g>

		</svg>
	</div>

</body>
</html>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .slice
{
	display: none;
	fill: lightgrey;
}

.wheel
{
	position: absolute;
	top: calc(50% - 100px);
	left: calc(50% - 100px);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var visibleSlice = 0;
var numberOfSlices = 8;

function showNextSlice()
{
	visibleSlice++;
	if(visibleSlice > numberOfSlices) visibleSlice=1;

	document.getElementById("slice" + visibleSlice).style.display = "inline";

	if(visibleSlice == 1)
	{
		document.getElementById("slice" + numberOfSlices).style.display = "none";
	}
	else if (visibleSlice > 1)
	{
		document.getElementById("slice" + (visibleSlice-1)).style.display = "none";
	}
}

function runAnimation()
{
	showNextSlice();
	setTimeout(runAnimation, 50);
}

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................