Open In App

Primer CSS Loaders

Improve
Improve
Like Article
Like
Save
Share
Report

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible.

The Loaders inform users that action is still in progress and might take a while to complete. This is a great way to inform users that the application is not in halt mode and is working in the background.

Primer CSS Loader Class:

  • AnimatedEllipsis: This class is used to add 3 animated dots (…) at the end of the element to show the loading state. This class can be applied in combination with a variety of elements such as <h1> to <h6>, <span> and <button> elements, etc.

Syntax:

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

Example 1: This example demonstrates the basic loader class in 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>


Output:

Output

Example 2: This example demonstrates the luse of the Loader class with <div>, <span> and <button> element in 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>


Output:

Primer CSS Loader

Reference: https://primer.style/css/components/loaders



Last Updated : 10 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads