Spectre Loading

Spectre Loading Component is used to create loading indicator which is used for loading or updating. You can add the loading class to a container for loading status. We can use large sizes loading indicators.

Spectre Loading Class:

loading: This class is used to create a loading indicator.
loading-lg: This class is used to create a large loading indicator.

Syntax:

<div class="loading">
   ....
</div>
<div class="loading loading-lg">
  ....
</div>

Example: The below example illustrates the Spectre Loading.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>SPECTRE Loading Class</title>
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</head>

<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>SPECTRE Loading Class</strong>        
    </center>
    <br>
    <strong>Normal Size Loading Indicator:</strong>
    <button class="btn btn-success loading">
      Upload-Pic
    </button>
    <button class="btn btn-error">
      Cancel Uploading
    </button>
    <br><br>
    <strong>Large Size Loading Indicator:</strong>
    <button class="btn btn-success loading loading-lg">
      Upload-Pic
    </button>
    <button class="btn btn-error">
      Cancel Uploading
    </button>
</body>
</html>

Output:

Reference: https://picturepan2.github.io/spectre/utilities/loading.html

Explore