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