Skip to content
Related Articles

Related Articles

Spectre Loading

View Discussion
Improve Article
Save Article
  • Last Updated : 07 Feb, 2022

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=
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
</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:

Spectre  Loading

Spectre  Loading

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!