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

HTML и CSS Программирование и разработка

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>

Выход:

Читайте также:  Как использовать Maps в C++

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

Пример 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

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

Оцените статью
bestprogrammer.ru
Добавить комментарий