Jak zrobić proste spinner CSS?

W tworzeniu stron internetowych można wykorzystać spinner w celu wyświetlenia stanu ładowania strony internetowej lub projektu. Można go po prostu zaprojektować za pomocą właściwości HTML i CSS. Ponadto może nie wymagać żadnych twardych i szybkich zasad, takich jak wykorzystanie JavaScript i innych języków programowania. Aby to zrobić, CSS ”Radiusz graniczny„Można użyć właściwości.

Ten post stwierdził, jak zaprojektować prosty spinner CSS.

Jak zrobić proste spinner CSS?

Aby stworzyć prosty spinner CSS, najpierw utwórz pojemnik Div, a następnie zastosuj „Radiusz graniczny" nieruchomość. Następnie zastosuj określone właściwości CSS, w tym „animacja”,„Radiusz graniczny”,„przekształcać", i inni.

Aby uzyskać praktyczne implikacje, wypróbuj podane kroki.

Krok 1: Zrób kontener DIV

Początkowo zrób kontener DIV za pomocą „" element. Włóż także „klasa”Atrybut o określonej nazwie:

Krok 2: Zrób prosty spinner

Uzyskaj dostęp do utworzonego kontenera za pomocą nazwy klasy i zastosuj poniżej podawane właściwości CSS:

.spin-container :: przed
Animacja: 1.9em;
Animation-Play-State: dziedzictwo;
granica: solidny 5px #c2dffc;
Margines: 10%;
Radiusz graniczny: 50%;
kolor graniczny: #064E18;
Transform: Translate3d (-50%,-50%, 0);
treść: "";
Wysokość: 100px;
szerokość: 100px;
Pozycja: absolutna;
TOP: 40%;
Po lewej: 40%;
Will-Change: Transform;

Tutaj:

• • "animacja”To krótka właściwość CSS wykorzystywana do zastosowania animacji między stylami.
  • "Animation-Play-State”Określa, czy animacja jest w stanie działającym, czy zatrzymana.
  • "granica„Własność definiuje granicę wokół konkretnego elementu.
  • "margines”Definiuje przestrzeń poza zdefiniowaną granicą.
  • "Radiusz graniczny”Określa promień zakrętów pierwiastka.
  • "kolor graniczny”Jest wykorzystywany do ustawiania koloru po dolnej stronie zdefiniowanej granicy.
  • "przekształcać”Przekształca element w sposób 2D lub 3D. Ta właściwość pozwala użytkownikom skalowanie, wypaczanie, poruszanie i obracanie elementów.
  • "treść”Służy do wstawienia tekstu do elementu.
  • "wysokość" I "szerokość„Właściwości są używane do określenia rozmiaru elementu.
  • "pozycja”Określa typ metody pozycjonowania elementu.
  • "szczyt" I "lewy„Właściwości przydzielają pozycję elementu.
  • "ulegnie zmianie”Wskazówki dla przeglądarki o tym, jak może się zmienić element.

Można zauważyć, że prosty spinner został utworzony i zaprojektowany z powodzeniem:

Chodzi o tworzenie i stylizację prostego spinnera CSS.

Wniosek

Aby zrobić prosty spinner CSS, najpierw zaprojektuj kontener DIV. Następnie zastosuj określone właściwości CSS, w tym „animacja”,„Radiusz graniczny”,„przekształcać”,„Radiusz graniczny”,„kolor graniczny", i inni. Ten post wykazał metodę projektowania prostego spinnera CSS.