Internetstiftelsen Styleguide

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";
@use '../../configurations/colors/colors' as colors;

// 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: colors.$color-ocean;

		+ circle {
			stroke-dasharray: 100;
			stroke: colors.$color-ocean-light;
		}
	}
}

@keyframes spin {
	100% {
		transform: rotate(360deg);
	}
}
  • URL: /components/raw/spinner/_spinner.scss
  • Filesystem Path: src/atoms/spinner/_spinner.scss
  • Size: 458 Bytes

No notes defined.