VG en CSS zijn voor elkaar gemaakt ♥. In deze tutorial leren we hoe we een eenvoudige SVG-vorm kunnen tekenen en de lijn van die vorm kunnen animeren om een laadspinner te maken.

We zullen in SCSS schrijven om de styling te stroomlijnen.

De HTML/SVG-code is eenvoudig; ons doel is een 40px brede cirkel te tekenen. De enige attributen hier zijn de x- en y-coördinaten (oorsprongspunt) en de straal.

Om rekening te houden met de dikte van de lijn wanneer we die later toevoegen, zal de straal r 18 zijn in plaats van 20.

<svg class="spinner">
<circle cx="20" cy="20" r="18"></circle>
</svg>

Het vormgeven van de SVG

Zoals altijd willen we eerst het boxmodel definiëren. Omdat wij met SVG werken, omvat dit de viewBox en zijn x- en y-coördinaten.

De viewBox definieert de grenzen waarbinnen onze cirkel zal worden gerenderd.

$spinnerSize: 40;svg.spinner {
width: $spinnerSize + px;
height: $spinnerSize + px;
x: 0px; y: 0px;
viewBox: 0 0 $spinnerSize $spinnerSize;
}

Wij zullen op de cirkel lijnstijlen en een transparante vulling toepassen. Hierdoor ontstaat een omlijning rond het cirkelpad. Wij zullen de lijn animeren om onze spinner te maken.

svg.spinner {
... circle {
fill: transparent;
stroke: #0ac8a6;
stroke-width: 4;
stroke-linecap: round;
}
}

De spinner begint vorm te krijgen, maar voordat wij gaan animeren, moeten wij nog een paar stijlen toepassen. Het ‘groeiend en terugtrekkend’ effect wordt gecreëerd met een brede streep. De lijn wordt rond het cirkelpad ‘geduwd’ door de afstand tussen de streepjes te vergroten.

Om de brede streepjeslijn te creëren, gebruiken we de eigenschap stroke-dasharray. Door deze in te stellen op π × radius ontstaat een streepje met een lengte gelijk aan de omtrek van de cirkel. Voorlopig zal dit verschijnen als een effen lijn.

svg.spinner {
... circle {
...
stroke-dasharray: (3.14 * $spinnerSize);
}
}

Tot slot moeten wij de transform-origin en animatie eigenschappen instellen. Door de transform-origin op het middelpunt van de cirkel te zetten, wordt de cirkel gelijkmatig gedraaid. De animatie-eigenschap zal de spinner animatie-naam gebruiken, die wij hierna zullen keyframen.

svg.spinner {
... circle {
...
transform-origin: (0.5px * $spinnerSize) (0.5px * $spinnerSize) 0;
animation: spinner 4s linear infinite;
}
}

Keyframen van de animatie

Eerder hebben wij de lijn ingesteld op een streepje met een lengte gelijk aan de omtrek. Nu kunnen we de offset van dit streepje animeren om het van het cirkelpad af te ‘duwen’.

De offset kan worden gewijzigd met behulp van de eigenschap stroke-dashoffset. Door de offset te vergroten wordt het streepje teruggetrokken, terwijl het door te verkleinen weer langs het cirkelpad groeit.

Dus, wij hebben de lijn langs het cirkelpad geanimeerd – dat was het moeilijkste gedeelte. Maar als een laadspinner is het intrekken van de lijn niet helemaal wat we willen. Wij willen dat het lijkt alsof er een constante progressie is – om de illusie te wekken dat de lijn altijd ‘voorwaarts’ beweegt.

Hoe kunnen wij dit doen? Door de cirkel te draaien terwijl de streek animeert.

@keyframes spinner {
0% {
...
transform: rotate(0deg);
} 50% {
...
transform: rotate(540deg);
} 100% {
...
transform: rotate(1080deg);
}
}

We komen steeds dichterbij, maar de spinner lijkt langzamer te gaan draaien. Dit gebeurt wanneer de slag tegen de draairichting in beweegt. We kunnen dit tegengaan door in de eerste helft van de animatie meer te roteren.

@keyframes spinner {
0% {
...
transform: rotate(0deg);
} 50% {
...
transform: rotate(720deg);
} 100% {
...
transform: rotate(1080deg);
}
}

In onderstaand voorbeeld zijn er twee spinners:

• De eerste heeft de bestaande uniforme rotatiesnelheid (gaat ‘vertraging’ niet tegen).
• De tweede gebruikt de snellere rotatie in de eerste helft van de animatie.

Ik heb enkele rode markers toegevoegd als referentie voor de snelheid waarmee de spinner draait.

U kunt zien dat de tweede spinner veel vloeiender is. Dit komt doordat hij met een gelijkmatigere snelheid lijkt te bewegen. Laten we tot slot de snelheid verhogen door de duur van de animatie-eigenschap te verkorten.

Verder lezen

• MDN animatie
• MDN stroke-dasharray
• MDN stroke-dashoffset