What is Spectre Loading?

In this article, we will learn Spectre Loading,This free Spectre tutorial for complete beginners will help you learn Spectre from scratch.

Spectre Loading - ❤️Spectre Tutorials In 2024

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/dist/spectre.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
</head> 
  
<body> 
    <center> 
        <h1 class="text-success">w3wiki</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

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