Tilbage til oversigten

Simpel SVG loader

Denne loader var oprindeligt inspireret af en, der blev brugt på Google Now.

Jeg lavede den først i 2016, til brug som eksempel da jeg skulle undervise i SVG og CSS animationer på Syddansk Erhvervsskole.

Helt simpelt, så er der tale om to SVG cirkler, placeret oven på hinanden i koordinatsystemet. Den ene er nedtonet i farven, den anden er mere tydelig. Den øverste får så animeret, dels sin stroke til at variere i længde, og dels bliver den roteret omkring midten af sig selv.

Som en ekstra detalje, er der endnu en lille cirkel, der er placeret ved slutningen af det animerede element, drejer sammen med det, og har samme diameret som bredden på det andet elements stroke. Det er nødvendigt, for ellers ville cirklen nemlig forsvinde helt, fremfor at forblive i et enkelt punkt, når elementets stroke er kortest.

Se resultatet her:

See the Pen Basic SVG Loader by Katrine-Marie Burmeister (@Katrine-Marie) on CodePen.16999

Er du interesseret i et samarbejde?