Основные загрузчики CSS

На чтение 5 мин Просмотров 75 Опубликовано 11.04.2022

Primer CSS — это бесплатная среда CSS с открытым исходным кодом, построенная на системах, создающих основу для основных элементов стиля, таких как интервалы, типографика и цвет. Этот систематический метод гарантирует, что наши шаблоны стабильны и взаимодействуют друг с другом. Его подход к CSS находится под влиянием принципов объектно-ориентированного CSS, функционального CSS и архитектуры БЭМ. Он очень многоразовый и гибкий.

Загрузчики информируют пользователей о том, что действие все еще выполняется и может занять некоторое время. Это отличный способ сообщить пользователям, что приложение не находится в режиме ожидания и работает в фоновом режиме.

Класс загрузчика CSS Primer:

AnimatedEllipsis:этот класс используется для добавления 3 анимированных точек (…) в конце элемента, чтобы показать состояние загрузки. Этот класс можно применять в сочетании с различными элементами, такими как от <h1> до <h6>, элементами <span> и <button> и т. д.

Синтаксис:

<span>Loading</span><span class="AnimatedEllipsis"></span>

Пример 1: Этот пример демонстрирует базовый класс загрузчика в Primer CSS.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Primer CSS</title>



    <meta charset="utf-8">

    <meta name="viewport" content=

        "width=device-width, initial-scale=1">



    <link href=

"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"

         rel="stylesheet" />

</head>

<body>

    <center>

        <h1>GeeksforGeeks</h1>

        <strong>Primer CSS Loader</strong>

        <br>

        <span>Loading</span><span

            class="AnimatedEllipsis">

        </span>

    </center>

</body>

</html>

Выход:

Пример 2: Этот пример демонстрирует использование класса Loader с элементами <div>, <span> и <button> в Primer CSS.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Primer CSS</title>

    <meta charset="utf-8">

    <meta name="viewport" content=

        "width=device-width, initial-scale=1">

    <link href=

"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"

          rel="stylesheet" />

</head>

<body>

    <center>

        <h1>GeeksforGeeks</h1>

        <h3>Primer CSS Loader</h3>

        <br>

        <span>Component Loading</span>

        <span class="AnimatedEllipsis"></span><br>

        <div class="branch-name mt-3">

            <span>Video Loading</span>

            <span class="AnimatedEllipsis"></span>

        </div>

        <br/>

        <div class="Label mt-4">

            <span>Module Loading</span>

            <span class="AnimatedEllipsis"></span>

        </div>

        <br/>

        <button class="btn mt-4" aria-disabled="true">

            <span>Button Loading</span>

            <span class="AnimatedEllipsis"></span>

        </button>

    </center>

</body>

</html>

Выход:

Начальный загрузчик CSS