Share
Pre-laders zijn een veel voorkomend verschijnsel in modern webdesign. Als gebruikers verwachten we dat het web snel en vloeiend is - we houden niet van wachten op dingen. Pre-loaders bieden visuele feedback in het geval dat inhoud wordt geladen, waardoor de verwachtingen worden beheerst en de kans kleiner wordt dat een gebruiker uw website verlaat.
Voordat we ons gaan bezighouden met het bouwen van onze verzameling CSS3-voorladers, zal ik eerst een aantal kenmerken van CSS3 bespreken die essentieel zijn voor het maken van dit soort voorladers..
Accentsconagua
:voor :naPseudo-elementen zijn werkelijk nuttig bij het maken van CSS3 pre-loaders. Pseudo-elementen creëren in wezen een nep-element vóór of na het betreffende HTML-element.
"Pseudo is afgeleid van het Griekse woord pseudēs wat vals betekent. "
Dit lijkt op het creëren van een extra element dat niet echt bestaat, maar pseudo-elementen kunnen worden gestileerd met behulp van CSS. Deze pseudo-elementen zijn geen noodzaak voor het maken van CSS3-pre-loaders, maar ze komen van pas en stellen ons in staat om minimale markup te gebruiken.
Pseudo-elementen kunnen op precies dezelfde manier worden gestileerd als elk ander HTML-element, met als enige verschil dat u a moet opgeven inhoud eigendom. Zonder dit op te geven, wordt het pseudo-element niet weergegeven. De inhoudseigenschap kan elke tekst bevatten die nuttig kan zijn als uw preloader woorden moet bevatten zoals "Bezig met laden". Als u echter geen tekstinhoud nodig heeft, kunt u de inhoudseigenschap leeg laten..
CSS-pseudo-elementen zijn nuttig, maar niet essentieel voor het maken van CSS3 pre-loaders, maar de eigenschap animatie is. Zonder dit zou de pre-lader niet kunnen animeren en zou het gewoon een statische visualisatie zijn - niet erg handig om aan te geven dat de inhoud wordt geladen.
"Het belangrijkste onderdeel van CSS-animaties is @keyframes, de CSS-regel waar animatie wordt gemaakt. Zie @keyframes als fasen langs een tijdlijn. Binnen @ keyframes kun je deze fases definiëren, elk met een andere stijlverklaring. "- Een beginnersinleiding tot CSS-animatie
Notitie: voordat we aan de demo's beginnen, is het misschien de moeite waard om op te merken dat de voorvoegsels van de leverancier niet zijn opgenomen in de onderstaande codefragmenten. Als u de voorvoegsels van de leverancier nodig heeft, raadpleegt u de codepen-voorbeelden.
Het idee achter deze pre-loader is om een animatie te maken die lijkt op een audiogolf.
Dit wordt bereikt door het creëren van vijf overspanningen, die elk een audiobalk vertegenwoordigen.
Het effect wordt bereikt door de hoogte van elke reeks te animeren van 5 px tot 30 px. De overspanning verplaatst zich ook met 15px omlaag over de Y-as om het effect te krijgen dat deze vanaf het midden groeit.
# preloader_1 positie: relatief; # preloader_1 span display: block; bodem: 0px; breedte: 9px; hoogte: 5px; background: # 9b59b6; positie: absoluut; animatie: 1,5-inch oneindige gemak-in-uitgang van preloader_1; # preloader_1 span: nth-child (2) left: 11px; animatie-vertraging: .2s; # preloader_1 span: nth-child (3) left: 22px; animatie-vertraging: .4s; # preloader_1 span: nth-child (4) left: 33px; animatie-vertraging: .6s; # preloader_1 span: nth-child (5) left: 44px; animatie-vertraging: .8s; @keyframes preloader_1 0% height: 5px; transform: translateY (0px); background: # 9b59b6; 25% height: 30px; transform: translateY (15px); background: # 3498db; 50% height: 5px; transform: translateY (0px); background: # 9b59b6; 100% height: 5px; transform: translateY (0px); background: # 9b59b6;
Standaard gebeurt de animatie op elke reeks op hetzelfde moment. De Mexicaanse golf effect wordt gecreëerd door toe te voegen animatie-delay voor elke reeks met een offset van 2 milliseconden. Elke reeks wordt getarget met behulp van de n-kind () keuzeschakelaar.
Deze voorlader gebruikt vier vierkanten die verschuiven, roteren, van kleur veranderen en cirkels worden.
Het is gemaakt met behulp van vier overspanningen. Elk is een cirkel / vierkant en heeft een eigen animatie erop.
Alle vier transformeren ze van een vierkant in een cirkel door de grensradius aan te passen van 0px (vierkant) tot 20px (cirkel).
# preloader_2 positie: relatief; links: 50%; breedte: 40px; hoogte: 40px; # preloader_2 span display: block; bodem: 0px; breedte: 20px; hoogte: 20 px; background: # 9b59b6; positie: absoluut; # preloader_2 span: nth-child (1) animation: preloader_2_1 1.5s oneindige ease-in-out; # preloader_2 span: nth-child (2) left: 20px; animatie: preloader_2_2 1.5s oneindig gemak in-uit; # preloader_2 span: nth-child (3) top: 0px; animatie: preloader_2_3 1.5s oneindig gemak in-uit; # preloader_2 span: nth-child (4) top: 0px; left: 20px; animatie: preloader_2_4 1.5s oneindig gemak in-uit; @ -keyframes preloader_2_1 0% -transform: translateX (0px) translateY (0px) rotate (0deg); grensradius: 0px; 50% -transform: translateX (-20px) translateY (-10px) rotate (-180deg); grensradius: 20px; achtergrond: # 3498db; 80% -transform: translateX (0px) translateY (0px) rotate (-360deg); grensradius: 0px; 100% -transform: translateX (0px) translateY (0px) rotate (-360deg); grensradius: 0px; @ -keyframes preloader_2_2 0% -transform: translateX (0px) translateY (0px) rotate (0deg); randradius: 0px; 50% -transform: translateX (20px) translateY (-10px) roteren (180deg); grensradius: 20px; achtergrond: # f1c40f; 80% -transform: translateX (0px) translateY (0px) rotate (360deg); randradius: 0px; 100% -transform: translateX (0px) translateY (0px) rotate (360deg); randradius: 0px; @ -keyframes preloader_2_3 0% -transform: translateX (0px) translateY (0px) rotate (0deg); border- radius: 0px; 50% -transform: translateX (-20px) translateY (10px) rotate (-180deg); grensradius: 20px; achtergrond: # 2ecc71; 80% -transform: translateX (0px) translateY (0px) rotate (-360deg); randradius: 0px; 100% -transform: translateX (0px) translateY (0px) roteren (-360deg); grensradius: 0px; @ -keyframes preloader_2_4 0% -transform: translateX (0px) translateY (0px) rotate (0deg); grensradius: 0px; 50% -transform: translateX (20px) translateY (10px) rotate (180deg); grensradius: 20px; achtergrond: # e74c3c; 80% -transform: translateX (0px) translateY (0px) rotate (360deg); grensradius: 0px; 100% -transform: translateX (0px) translateY (0px) rotate (360deg); randradius: 0px;
Elke roteert ook en beweegt langs de X & Y-as in tegengestelde richting van zijn huidige positie. De kleur van elke reeks is ook geanimeerd van een uniform paars naar zijn eigen onafhankelijke kleur. Dit geeft de indruk dat de vormen uit verschillende cirkels samenkomen in één vierkant.
De voorlader van Crossing Shapes is een enkele div die gebruikmaakt van de :voor en :na pseudo-elementen waar we eerder over gesproken hebben.
# preloader_3 position: relative; # preloader_3: before width: 20px; hoogte: 20px; border-radius: 20px; Achtergrond: blauw; inhoud: "; positie: absoluut; achtergrond: # 9b59b6; animatie: preloader_3_before 1,5 sec. oneindig veel gebruiksgemak; # preloader_3: na width: 20px; height: 20px; border-radius: 20px; background: blue; content : "; positie: absoluut; background: # 2ecc71; left: 22px; animatie: preloader_3_after 1.5s oneindig gemak in-uit; @keyframes preloader_3_before 0% transform: translateX (0px) rotate (0deg) 50% transform: translateX (50px) schaal (1.2) roteer (260deg); achtergrond: # 2ecc71; randradius: 0px; 100% transform: translateX (0px) rotate (0deg) @keyframes preloader_3_after 0% transform: translateX (0px) 50% transform: translateX (-50px ) schaal (1.2) roteren (-260deg); achtergrond: # 9b59b6; randradius: 0px; 100% transform: translateX (0px)
Er wordt één animatie geplaatst # Preloader_3: vóór en een andere aan # Preloader_3: na. Elke animatie verandert in de tegenovergestelde tijd in een andere kleur. Net als bij de vorige pre-loader verandert elk pseudo-element van een cirkel in een vierkant door het te animeren border-radius eigendom.
De slang bestaat uit een verzameling overspanningen die elk zijn vormgegeven om een cirkel te vormen.
Dit is de opmaak, maar je kunt altijd proberen de slangenpre-loader te maken met drie cirkels en in plaats van verschillende overspanningen gewoon te gebruiken # preloader_4 div met :voor en :na.
De animatie wordt gemaakt door de Y-positie van elke animatie met -10px te transformeren en de kleur van blauw in geel te wijzigen. Om het onderliggende schaduweffect te maken, wordt aan elke reeks een slagschaduw toegevoegd die de verticale schaduwgrootte wijzigt van 0px in 20px.
# preloader_4 positie: relatief; # preloader_4 span position: absolute; width: 20px; hoogte: 20px; background: # 3498db; opaciteit: 0.5; border-radius: 20px; -animatie: preloader_4 1s oneindig gemak in-uit; # preloader_4 span: nth-child (2) left: 20px; animatie-vertraging: .2s; # preloader_4 span: nth-child (3) left: 40px; animatie-vertraging: .4s; # preloader_4 span: nth-child (4) left: 60px; animatie-vertraging: .6s; # preloader_4 span: nth-child (5) left: 80px; animatie-vertraging: .8s; @keyframes preloader_4 0% opacity: 0.3; transform: translateY (0px); vakschaduw: 0px 0px 3px rgba (0, 0, 0, 0.1); 50% dekking: 1; transformatie: translateY (-10px); background: # f1c40f; vakschaduw: 0px 20px 3px rgba (0, 0, 0, 0.05); 100% dekking: 0.3; transform: translateY (0px); vakschaduw: 0px 0px 3px rgba (0, 0, 0, 0.1);
Vergelijkbaar met pre-loader 1, door toe te voegen animatie-delay voor elke overspanning en compensatie van de vertraging van elke reeks met 2 milliseconden wordt het golfeffect gecreëerd.
Dit is ... een spinny ding.
Hier gebruiken we gewoon een enkele div voor de centrale cirkel en :na op die div om de buitenste lijnen te creëren.
Een rand toevoegen aan de boven- en onderkant en deze een border-radius van 50px maakt de twee buitenste lijnen. Er wordt een animatie aan de hoofddiv toegevoegd om de kleur van de hoofddeler te wijzigen en het rotatie-effect te creëren door toe te voegen transformeren: roteren () . De :na elementanimatie wordt toegevoegd om de kleur van de buitenrand te wijzigen.
# preloader5 position: relative; width: 30px; hoogte: 30px; background: # 3498db; border-radius: 50px; animatie: preloader_5 1.5s oneindig lineair; # preloader5: after position: absolute; width: 50px; hoogte: 50px; border-top: 10px solid # 9b59b6; border-bottom: 10px solid # 9b59b6; border-left: 10px solid transparant; border-right: 10px solide transparant; border-radius: 50px; inhoud: "; top: -20px; links: -20px; animatie: preloader_5_after 1.5s oneindig lineair; @keyframes preloader_5 0% transform: rotate (0deg); 50% transform: rotate (180deg); background: # 2ecc71; 100% transform: rotate (360deg); @keyframes preloader_5_after 0% border-top: 10px solid # 9b59b6; border-bottom: 10px solid # 9b59b6; 50% border-top: 10px vast # 3498db; border-bottom: 10px solid # 3498db; 100% border-top: 10px solid # 9b59b6; border-bottom: 10px solid # 9b59b6;
We zijn een beetje Microsoft op deze gegaan ...
Deze voorlader wordt gemaakt met een div en vier overspanningen om elk vierkant te maken.
Deze vierkanten worden vervolgens in een rasterachtige volgorde gepositioneerd. Animatie wordt toegevoegd aan de hoofd-div om de hele pre-lader te draaien. Aan de overspanningen wordt nog een animatie toegevoegd, die ze van 100% tot 50% schaalt. We voegen dan toe animatie-delay op elke reeks om het pulserende effect te creëren.
# preloader6 positie: relatief; breedte: 42px; hoogte: 42px; animatie: preloader_6 5s oneindig lineair; # preloader6 span width: 20px; hoogte: 20px; positie: absoluut; achtergrond: rood; display: block; animatie: preloader_6_span 1s oneindig lineair; # preloader6 span: nth-child (1) background: # 2ecc71; # preloader6 span: nth-child (2) left: 22px; background: # 9b59b6; animatie-vertraging: .2s; # preloader6 span: nth-child (3) top: 22px; background: # 3498db; animatie-vertraging: .4s; # preloader6 span: nth-child (4) top: 22px; left: 22px; background: # f1c40f; animatie-vertraging: .6s; @keyframes preloader_6_span 0% transform: scale (1); 50% transform: schaal (0,5); 100% transform: schaal (1);
Het grote voordeel van het gebruik van CSS3-voorladers op voorladers met afbeeldingen is dat ze schaalbaar en klaar voor het netvlies zijn. Dat betekent dat het niet uitmaakt op welk apparaat ze worden weergegeven, ze zullen altijd helder, schoon en toekomstbestendig zijn (hoewel niet alle oudere browsers CSS3-animatie ondersteunen).
Door een paar belangrijke CSS3-eigenschappen en -technieken te begrijpen, zou u nu in staat moeten zijn om uw eigen CSS3 pre-loaders te maken. Ze zijn leuk om te maken en met een beetje experiment kunt u een aantal echt coole animaties maken om te voorkomen dat gebruikers uw website verlaten.
Als je recent coole voorladers hebt gemaakt, wil ik ze graag zien! Laat hieronder je reacties achter.
