Animation · oktober 26, 2018 0

Demo: Simpel SVG loader

Det er en simpel og basal SVG loader, oprindeligt baseret 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 sit center. 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 diameter 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.

Eksempel