Single Element Loaders: The Spinner

Att göra CSS-endast laddare är en av mina favorituppgifter. Det är alltid tillfredsställande att titta på de där oändliga animationerna. Och det finns det såklart Föremål av tekniker och tillvägagångssätt för att göra dem – inget behov av det titta längre än CodePen för att se hur många. I den här artikeln kommer vi dock att se hur man gör en enstaka elementladdare som skriver så lite kod som möjligt.

Jag har gjort en samling av mer än 500 enkla div-lastare och i den här serien i fyra delar kommer jag att dela med mig av tricken jag använde för att skapa många av dem. Vi kommer att täcka ett stort antal exempel, visa hur små justeringar kan leda till roliga variationer, och hur lite kod vi behöver skriva för att få allt att hända!

För den här första artikeln kommer vi att skapa ett av de vanligaste lastarmönstren: snurrstänger:

Här är tillvägagångssättet

En trivial implementering för den här laddaren är att skapa ett element för varje stång insvept i ett överordnat element (för totalt nio element), och sedan spela med opacity och transform för att få snurreffekten.

Min implementering kräver dock bara ett element:

<div class="loader"></div>

…och 10 CSS-deklarationer:

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid; mask: conic-gradient(from 22deg, #0003, #000); animation: load 1s steps(8) infinite;
}
.loader,
.loader:before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader:before { content: ""; transform: rotate(45deg);
}
@keyframes load { to { transform: rotate(1turn); }
}

Låt oss bryta ner det

Vid första anblicken kan koden se konstig ut men du kommer att se att den är enklare än vad du kanske tror. Det första steget är att definiera elementets dimension. I vårt fall är det en 150px fyrkant. Vi kan lägga aspect-ratio att använda så att elementet förblir fyrkantigt oavsett vad.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; /* make height equal to width */
}

När jag bygger CSS-lastare försöker jag alltid ha ett värde för att kontrollera den totala storleken. I det här fallet är det width och alla beräkningar vi täcker kommer att hänvisa till det värdet. Detta gör att jag kan ändra ett enda värde för att styra lastaren. Det är alltid viktigt att enkelt kunna anpassa storleken på våra lastare utan att behöva justera en massa tilläggsvärden.

Därefter kommer vi att använda gradienter för att skapa staplarna. Det här är det knepigaste! Låt oss använda ett gradient att skapa två barer som nedan:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;

Vår gradient definieras med en färg och två färgstopp. Resultatet är en solid färg utan blekning eller övergångar. Storleken är lika med 34% bred och 8% lång. Den är också placerad i mitten (50%). Tricket är att använda nyckelordet värde space — detta duplicerar gradienten, vilket ger oss två totala staplar.

Från specifikationen:

Bilden upprepas så ofta som den får plats inom bakgrundspositioneringsområdet utan att klippas och sedan delas bilderna ut för att fylla området. De första och sista bilderna rör kanterna på området.

Jag använder en bredd lika med 34% vilket betyder att vi inte kan ha mer än två staplar (3*34% är större än 100%) men med två staplar kommer vi att ha tomma utrymmen (100% - 2 * 34% = 32%). Det utrymmet placeras i mitten mellan de två staplarna. Med andra ord använder vi en bredd för gradienten som är mellan 33% och 50% för att se till att vi har minst två staplar med lite utrymme mellan dem. Värdet space är det som placerar dem korrekt för oss.

Vi gör samma sak och gör en andra liknande gradient för att få ytterligare två staplar längst upp och ned, vilket ger oss en background fastighetsvärde på:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat, linear-gradient(#17177c 0 0) 50%/8% 34% no-repeat space;

Vi kan optimera det med en CSS-variabel för att undvika upprepning:

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;

Så nu har vi fyra staplar och tack vare CSS-variabler kan vi skriva färgvärdet en gång vilket gör det enkelt att uppdatera senare (som vi gjorde med storleken på laddaren).

För att skapa de återstående staplarna, låt oss trycka på .loader element och dess ::before pseudo-element för att få ytterligare fyra takter för totalt åtta.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid;
}
.loader,
.loader::before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader::before { content: ""; transform: rotate(45deg);
}

Notera användningen av display: grid. Detta gör att vi kan lita på nätets standard stretch inriktning för att få pseudoelementet att täcka hela området av dess förälder; så det finns inget behov av att specificera en dimension på det - ett annat knep som reducerar koden och undviker att vi hanterar många värden!

Låt oss nu rotera pseudoelementet med 45deg för att placera de återstående stängerna. Håll muspekaren över följande demo för att se tricket:

Ställa in opacitet

Vad vi försöker göra är att skapa intrycket av att det finns en stapel som lämnar ett spår av bleknande staplar efter sig när den färdas en cirkulär bana. Vad vi behöver nu är att leka med transparensen i våra barer för att göra det spåret, vilket vi kommer att göra med CSS mask kombinerat med en konisk gradient enligt följande:

mask: conic-gradient(from 22deg,#0003,#000);

För att bättre se tricket, låt oss tillämpa detta på en fullfärgad ruta:

Transparensen av den röda färgen ökar gradvis medurs. Vi applicerar detta på vår lastare och vi har stängerna med olika opacitet:

I verkligheten verkar varje stapel blekna eftersom den är maskerad av en gradient och faller mellan två halvtransparenta färger. Det märks knappt när det här körs, så det är ungefär som att kunna säga att alla staplar har samma färg med olika opacitet.

Rotationen

Låt oss använda en rotationsanimation för att få vår laddare. Observera att vi behöver en stegvis animering och inte en kontinuerlig, det är därför jag använder steps(8). 8 är inget annat än antalet staplar, så det värdet kan ändras beroende på hur många staplar som används.

.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}

Det är allt! Vi har vår lastare med bara ett element och några rader CSS. Vi kan enkelt kontrollera dess storlek och färg genom att justera ett värde.

Eftersom vi bara använde ::before pseudo-element kan vi lägga till ytterligare fyra staplar genom att använda ::after för att sluta med 12 streck totalt och nästan samma kod:

Vi uppdaterar rotationen av våra pseudoelement för att överväga 30deg och 60deg istället för 45deg medan du använder en tolvstegsanimation, snarare än åtta. Jag minskade även höjden till 5% istället för 8% för att göra stängerna lite tunnare.

Lägg också märke till att vi har grid-area: 1/1 på pseudoelementen. Detta gör att vi kan placera dem i samma område som varandra, staplade ovanpå varandra.

Gissa vad? Vi kan nå samma lastare med en annan implementering:

Kan du lista ut logiken bakom koden? Här är ett tips: opaciteten hanteras inte längre med en CSS mask men inne i gradienten och använder också opacity fast egendom.

Varför inte prickar istället?

Det kan vi helt göra:

Om du kontrollerar koden kommer du att se att vi nu arbetar med en radiell gradient istället för en linjär. I övrigt är konceptet exakt detsamma där masken skapar intrycket av opacitet, men vi gjorde formerna som cirklar istället för linjer.

Nedan är en figur för att illustrera den nya gradientkonfigurationen:

Om du använder Safari, notera att demon kan vara buggig. Det beror på att Safari för närvarande saknar stöd för at syntax i radiella gradienter. Men vi kan konfigurera om gradienten lite för att övervinna det:

.loader,
.loader:before,
.loader:after { background: radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) 50% -150%/20% 80% repeat-y, radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) -150% 50%/80% 20% repeat-x;
}

Fler exempel på lastare

Här är en annan idé för en spinnarlastare som liknar den föregående.

För den här förlitar jag mig bara på background och mask för att skapa formen (inga pseudoelement behövs). Jag definierar också konfigurationen med CSS-variabler för att kunna skapa många variationer från samma kod - ett annat exempel på bara krafterna hos CSS-variabler. Jag skrev en annan artikel om denna teknik om du vill veta mer.

Observera att vissa webbläsare fortfarande är beroende av en -webkit- prefix för mask-composite med sin egen uppsättning värden, och kommer inte att visa spinnern i demon. Här är ett sätt att göra det utan mast-composite för mer webbläsarstöd.

Jag har en till till dig:

För den här använder jag en background-color att styra färgen och använda mask och mask-composite för att skapa den slutliga formen:

Innan vi avslutar, här är några fler snurrande lastare som jag gjorde för ett tag sedan. Jag förlitar mig på olika tekniker men använder fortfarande gradienter, masker, pseudoelement, etc. Det kan vara en bra övning att ta reda på logiken i var och en och samtidigt lära mig nya trick. Detta sagt, om du har några frågor om dem, finns kommentarsektionen nedan.

Inslagning upp

Se, det finns så mycket vi kan göra i CSS med inget annat än en enda div, ett par gradienter, pseudoelement, variabler. Det verkar som om vi skapade en hel massa olika snurrande lastare, men de är alla i princip samma sak med små modifieringar.

Detta är bara början. I den här serien kommer vi att titta på fler idéer och avancerade koncept för att skapa CSS-lastare.

---

Single Element Loaders: The Spinner ursprungligen publicerad på CSS-tricks. Du borde få nyhetsbrevet.

• Myntsmart. Europas bästa bitcoin- och kryptobörs.
• Platoblockchain. Web3 Metaverse Intelligence. Kunskap förstärkt. FRI TILLGÅNG.
• CryptoHawk. Altcoin radar. Gratis provperiod.
• Källa: https://css-tricks.com/single-element-loaders-the-spinner/