SVG och CSS var menade att vara ♥. I den här handledningen lär vi oss hur man ritar en enkel SVG-form och animerar strecket i den formen för att skapa en laddningsspinnare.

Vi kommer att skriva i SCSS för att effektivisera styling.

HT HTML/SVG-koden är enkel; vårt mål är att rita en 40px bred cirkel. De enda attributen här är x- och y-koordinaterna (ursprungspunkten) och radien.

För att ta hänsyn till streckets tjocklek när vi lägger till det senare kommer radien r att vara 18 i stället för 20.

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

Styling av SVG

Som alltid vill vi definiera boxmodellen först. Eftersom vi arbetar med SVG omfattar detta viewBox och dess x- och y-koordinater.

ViewBox definierar gränserna som vår cirkel kommer att återges till.

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

Vi kommer att tillämpa stroke-stilar och en transparent fyllning på cirkeln. Detta skapar en kontur runt cirkelns bana. Vi kommer att animera strecket för att skapa vår spinnare.

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

Spinnaren håller på att ta form, men innan den animeras måste vi tillämpa ytterligare några stilar. Effekten ”växer och dras tillbaka” skapas med hjälp av ett brett streck. Strecket ”skjuts” runt cirkelbanan genom att öka förskjutningen mellan strecken.

För att skapa det breda strecket använder vi egenskapen stroke-dasharray. Genom att ställa in den på π × radie skapas ett streck med en längd som är lika med cirkelns omkrets. För tillfället kommer detta att visas som ett fast streck.

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

Slutligen måste vi ställa in egenskaperna transform-origin och animation. Genom att ställa in transform-origin till cirkelns centrum säkerställer vi att den roterar jämnt. Animationsegenskapen kommer att använda spinnarens animationsnamn, som vi kommer att keyframe nästa gång.

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

Keyframing the animation

Förut ställde vi in strecket till ett streck med en längd som är lika med omkretsen. Nu kan vi animera förskjutningen av detta streck för att ”skjuta” det utanför cirkelbanan.

Förskjutningen kan ändras med hjälp av egenskapen stroke-dashoffset. Om du ökar förskjutningen kommer strecket att dras tillbaka, medan du minskar den kommer att växa tillbaka längs cirkelns bana.

Så, vi har animerat strecket längs cirkelns bana – det var den svåra biten. Men som en laddningsspinnare är strecket som dras tillbaka inte riktigt vad vi är ute efter. Vi vill att det ska se ut som om det finns en konstant progression – för att skapa en illusion av att strecket alltid rör sig ”framåt”.

Hur kan vi göra detta? Genom att rotera cirkeln samtidigt som strecket animeras.

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

Vi närmar oss, men spinnaren verkar sakta ner. Detta händer när slaget rör sig mot rotationsriktningen. Vi kan motverka detta genom att rotera mer under den första halvan av animationen.

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

I exemplet nedan finns det två spinnare:

• Den första har den befintliga enhetliga rotationshastigheten (motverkar inte ”slowdown”).
• Den andra använder sig av den snabbare rotationen under den första halvan av animationen.

Jag har lagt till några röda markeringar som referenser för hastigheten med vilken spinnaren roterar.

Du kan se att den andra spinnaren är mycket mjukare. Detta beror på att den verkar röra sig med en jämnare hastighet. Som avslutning kan vi öka hastigheten genom att minska varaktigheten för animationsegenskapen.

Fortsatt läsning

• MDN animation
• MDN stroke-dasharray
• MDN stroke-dashoffset