Spinner

<figure class="spinner">
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" preserveaspectratio="xMidYMid" style="background: none;">
        <circle cx="50" cy="50" fill="none" r="43" stroke="#50b2fc" stroke-width="7"></circle>
        <circle cx="50" cy="50" fill="none" r="43" stroke="#a7d8fd" stroke-width="7" stroke-linecap="square" transform="rotate(27.6965 50 50)">
            <animatetransform attributename="transform" type="rotate" calcmode="linear" values="0 50 50;180 50 50;720 50 50" keytimes="0;0.5;1" dur="2.5s" begin="0s" repeatcount="indefinite"></animatetransform>
            <animate attributename="stroke-dasharray" calcmode="linear" values="9.42477796076938 179.0707812546182;188.4955592153876 -2.842170943040401e-14;9.42477796076938 179.0707812546182" keytimes="0;0.5;1" dur="2.5" begin="0s" repeatcount="indefinite"></animate>
        </circle>
    </svg>
</figure>
<figure class="spinner">
	<svg width="100%"  height="100%"  xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" preserveaspectratio="xMidYMid" style="background: none;"><circle cx="50" cy="50" fill="none" r="43" stroke="#50b2fc" stroke-width="7"></circle><circle cx="50" cy="50" fill="none" r="43" stroke="#a7d8fd" stroke-width="7" stroke-linecap="square" transform="rotate(27.6965 50 50)"><animatetransform attributename="transform" type="rotate" calcmode="linear" values="0 50 50;180 50 50;720 50 50" keytimes="0;0.5;1" dur="2.5s" begin="0s" repeatcount="indefinite"></animatetransform><animate attributename="stroke-dasharray" calcmode="linear" values="9.42477796076938 179.0707812546182;188.4955592153876 -2.842170943040401e-14;9.42477796076938 179.0707812546182" keytimes="0;0.5;1" dur="2.5" begin="0s" repeatcount="indefinite"></animate></circle></svg>
</figure>
/* No context defined. */
  • Content:
    @charset 'UTF-8';
    
    // IE Specific animation
    _:-ms-lang(x),
    .spinner {
    	width: 100%;
    	height: 100%;
    	overflow: hidden;
    
    	svg,
    	g {
    		animation: spin 2s linear infinite;
    	}
    
    	g {
    		transform-origin: center center;
    	}
    
    	circle {
    		stroke: $color-ocean;
    
    		+ circle {
    			stroke-dasharray: 100;
    			stroke: $color-ocean-light;
    		}
    	}
    }
    
    @keyframes spin {
    	100% {
    		transform: rotate(360deg);
    	}
    }
    
  • URL: /components/raw/spinner/_spinner.scss
  • Filesystem Path: src/atoms/spinner/_spinner.scss
  • Size: 391 Bytes

No notes defined.