Jak zrobić ładowarkę za pomocą CSS

Korzystając z dowolnej aplikacji, czasami możesz poczekać, aby wyświetlić zawartość, aż zostanie załadowana. W tym celu ładowarki na stronach internetowych lub aplikacjach pozwalają użytkownikowi czekać podczas wyświetlania animacji. Na stronie internetowej ładowarki te wskazują, że system się nie rozbił, a treść zostanie wyświetlona po pewnym czasie. Ponadto animowane ładowarki zapewniają atrakcyjny wygląd, który pomaga w utrzymaniu uwagi użytkownika na stronie internetowej.

W tym artykule zawiera instrukcje związane z tworzeniem ładowarki za pomocą CSS.

Jak zrobić ładowarkę za pomocą CSS?

W celu utworzenia ładowarki, po pierwsze, w HTML, dodaj element DIV z nazwą klasy „ładowarka". Wewnątrz tego elementu umieść kolejny element DIV o nazwie klasy „Inner ładowarki".

Html

Teraz przejdź do sekcji CSS, gdzie te elementy zostaną stylizowane w celu utworzenia ładowarki.

CSS

Stylizacja, którą zamierzamy zastosować, jest wspomniany poniżej.

Styl wszystkie elementy

*
Margines: 0;
Wyściółka: 0;
Rozmiar pola: granica;
Font-Family: Verdana, Genewa, Tahoma, Sans-Serif;

Wyjaśnienie wyżej wymienionego kodu podano poniżej:

• "*„Symbol gwiazdki służy do reprezentowania wszystkich rodzajów elementów, do których te właściwości zostaną zastosowane.
• "margines„Własność jest wykorzystywana do dawania miejsca wokół elementu. Wartość "0”Oznacza, że ​​wokół każdego elementu HTML nie byłoby marginesu.
• "wyściółka„Właściwość określa przestrzeń wokół treści elementu.
• "rozmiar pudełka„Własność o wartości”Box-box”Wskaż, że granica i wyściółka są uwzględnione w wysokości i szerokości.
• "rodzina czcionek„Definiuje czcionkę elementu.

Element „Body” stylu

ciało
Wysokość: 100 VH;
kolor tła: RGB (53, 53, 53);

Właściwości zastosowane do elementu ciała podano poniżej:

• "wysokość„Własność jest wykorzystywana do ustawienia wysokości ciała. Jednostka "VH”Reprezentuje to początkowo element ciała przyjmuje 100% wysokości rzutni.
• "kolor tła„Właściwość ustawia kolor tła ciała.

Styl „ładowarka” div

.ładowarka
Pozycja: absolutna;
TOP: 50%;
Po lewej: 50%;
Animacja: Ładowanie 400 mln liniowe nieskończone;

Opis właściwości zastosowanych do ładowarki HTML podano poniżej:

• "pozycja„Własność o wartości”absolutny„Umieści element ładowań w stosunku do jego rodziców.
• "szczyt„Właściwość ustawia pozycję pionową Div.
• "lewy”Własność ustawia pozycję poziomą Div.
• "animacja”To właściwość skrótów, która ustawia nazwę animacji, czas trwania animacji, funkcję czasu animacji i opóźnienie animacji dla ładowarki.

Notatka: „Ładowanie”To nazwa animacji, która zostanie wykorzystana w animacji @KeyFrames, aby określić animację.

Styl „ładowarki” div

.ładowarka .ładowarka
Szerokość: 60px;
Wysokość: 60px;
granica: 10px stały przezroczysty;
kolor graniczny: #00C8B1;
kolor graniczny: #00C8B1;
Radiusz graniczny: 50%;

Dziecko Div of Loader Div, mając imię „Inner ładowarki”Jest stosowany z właściwościami opisanymi poniżej:

• "szerokość„Właściwość ustawia szerokość elementu.
• "wysokość„Właściwość ustawia wysokość elementu.
• "granica”Określa granicę o szerokości, rodzaju linii i kolorze.
• "kolor graniczny”Dodaje kolor do górnej części granicy.
• "kolor graniczny”Dodaje kolor na lewo od granicy.
• "Radiusz graniczny”Określa promień granicy i sprawia, że ​​jest okrągłe.

Ładowarka jest pomyślnie utworzona i będzie wyglądać tak:

Ustawmy klatki kluczowe animacji wyżej wymogowanej ładowarki.

Ustaw klamry kluczowe animacji

@KeyFrames ładowanie-spinner
0%
Transform: Rotate (0Deg);

100%
Transform: Rotate (360DEG);

Klapki kluczowe w CSS definiują animację, ustawiając jej styl w innym czasie:

• "@KeyFrames ładowanie-spinner”: Nazwa animacji„Ładowanie”, A następnie słowo kluczowe @KeyFrames służy do ustawienia animacji.
• "0%”Reprezentuje animację na początku, w którym ładowarka zostanie obrócona”0" stopień.
• "100%”Reprezentuje animację na końcu podczas obracania ładowarki w„360" stopni.

Notatka: Nazwa animacji jest określona w div-inner ładowarki.

Wyjście

Fajny! Z powodzeniem stworzyliśmy animowaną ładowarkę z CSS.

Wniosek

Na stronach internetowych ładowarki w dodaniu, aby osiągnąć uwagę użytkownika, dopóki treść nie otrzyma ładunku. Istnieje kilka właściwości CSS wykorzystywanych do wytwarzania ładowarek, takich jak „animacja”I ustawienie klatek na rzecz klucza animacji za pomocą„przekształcać" nieruchomość. Ten pismo dotyczyło tworzenia ładowarki CSS i zastosowania animacji.