Spectre Loading
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
Reference: https://picturepan2.github.io/spectre/utilities/loading.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...