MAAK EEN MATERIAL-DE­SIGN CSS-LO­A­DER

Je kunt Svg-pa­den met CSS ani­me­ren voor in­druk­wek­ken­de ani­ma­ties te cre­ë­ren

Web Designer Magazine - - Creatief Met CSS4 & Html 5.1 -

1. Maak de SVG

Om Css-ei­gen­schap­pen te ani­me­ren, moet de SVG in­li­ne zijn. Als eer­ste maak je een een­vou­di­ge Svg-cir­kel en wrap je die in twee di­vs die je met de ani­ma­tie hel­pen. De CSS voor de lay-out mag je zelf schrij­ven, maar als je daar geen zin in hebt, ko­pi­eer je het voor­beeld van co­de­pen.io/motionimaging/pen/ Ezgk­dy. <div class=”ajax-lo­a­der”> <div class=”ajax-lo­a­der-cir­cle”>

<svg class=”ajax-lo­a­der-cir­cle-svg” view­box=”0 0 500 500”>

<cir­cle cx=”250” cy=”250” r=”239” /> </svg> </div> </div>

2. Ani­meer de kleu­ren

Ani­meer de kleur van de SVG door de stro­ke-kleur van de SVG tel­kens tus­sen vijf kleu­ren te la­ten ro­te­ren. Ex­pe­ri­men­teer met ver­schil­len­de kleu­ren tot je een e ect krijgt dat je mooi vindt.

3. Ani­meer dash-o fset

Om de SVG op een lo­a­der te la­ten lij­ken, ani­meer je de dash-o set van de SVG van­af een klein be­gin tot aan bij­na de he­le om­trek van de cir­kel. Sla de vol­le­di­ge om­trek van de cir­kel op als een va­ri­a­be­le en ani­meer dan van­af 25% tot 90% van die waar­de in de key­fra­me­a­ni­ma­tie. De om­trek wordt be­re­kend als 2 * 3.14 (pi) * 250 (straal) = 1570 voor de cir­kel die hier ge­bruikt wordt. Om het ef­fect te la­ten wer­ken, moet de das­har­ray even groot zijn als de vol­le­di­ge om­trek van de cir­kel.

4. Draai de con­tai­ners

Om het zo te la­ten lij­ken dat de lo­a­der rond­draait, moe­ten de twee con­tai­ner-di­vs met de­zelf­de snel­heid als de dash-o set draai­en. .ajax-lo­a­der{ po­si­ti­on: re­la­ti­ve; width: 100px; height: 100px; trans­form-ori­gin: (50%, 50%); ani­ma­ti­on: ajax­lo­a­der­spin $lo­a­der_­du­ra­ti­on li­near in­fi­ni­te; } .ajax-lo­a­der-cir­cle-svg{ po­si­ti­on: ab­so­lu­te; left: 0; top: 0; width: 100%; height: 100%; trans­form-ori­gin: (50%, 50%); ani­ma­ti­on: ajax­lo­a­der­dash­spin $lo­a­der_­du­ra­ti­on ea­se-in-out in­fi­ni­te; } @key­fra­mes ajax­lo­a­der­spin{

0% ... Ont­houd dat de voor­beeld­co­de op Co­de­pen staat.

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.