Categories
28°C, New York
Home Semantic-UI Semantic-UI Loader Variations

Semantic-UI Loader Variations

Semantic-UI Loader States

Semantic-UI | Placeholder

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create interactive interfaces. It can also be directly used via CDN like bootstrap.

Semantic-UI Loader Variations are used to represent the appearance of the loader element. There are four types of loader variations these are – Inline, Inline Center, Size, and Inverted.

Loader Variations:

  • Inline: It is used to display the loader element with content inline.
  • Inline Center: It is used to place the loader into the inline center.
  • Size: It is used to display the loaders in different sizes.
  • Inverted: It is used to display the loaders with their inverted colors.

Used Classes:

  • Loader Inline Variation Class:
    • inline: This class is used to place the loader with content inline.
  • Loader Inline Center Variation Class:
    • centered inline: This class is used to place the loader to the inline center.
  • Loader Size Variation Classes:
    • mini: This class is used to display the loader of mini size.
    • tiny: This class is used to display the loader of tiny size.
    • small: This class is used to display the loader of small size.
    • medium: This class is used to display the loader of medium size.
    • large: This class is used to display the loader of large size.
    • big: This class is used to display the loader of big size.
    • huge: This class is used to display the loader of huge size.
    • massive: This class is used to display the loader of massive size.
  • Loader Inverted Variation Classes:
    • inverted: This class is used to display the loaders with their inverted colors.

Syntax:

<div class="ui active variation_class loader"></div>

Example 1: In this example, we will describe the loader Inline variation.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        Semantic-UI Loader Inline Variations
    </title>
 
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
 
    <style>
        .ui.segment {
            padding: 50px 0;
        }
    </style>
</head>
 
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            w3wiki
        </h2>
 
        <h3>Semantic-UI Loader Inline Variations</h3>
    </div>
 
    <div class="ui container">
        <div class="ui segment">
            <div class="ui active inline loader"></div>
        </div>
    </div>
</body>
 
</html>
 






                        









													
													
												

												
												

													
													
Output:

													
													
												

												
												

													
													

													
													
												

												
												

													
													
Example 2: In this example, we will describe the Inline Center Variation.

													
													
												

												
												

													
													


HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>


<html>


 


<head>


    <title>


        Semantic-UI Loader Inline Center Variations


    </title>


 


    <link rel="stylesheet" href=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />


 


    <style>


        .ui.segment {


            padding: 50px 0;


        }


    </style>


</head>


 


<body>


    <div class="ui container center aligned">


        <h2 style="color:green">


            w3wiki


        </h2>


 


        <h3>Semantic-UI Loader Inline Center Variations</h3>


    </div>


 


    <div class="ui container">


        <div class="ui segment">


            <div class="ui active inline centered loader"></div>


        </div>


    </div>


</body>


 


</html>



















                        







                        









													
													
												

												
												

													
													
Output:

													
													
												

												
												

													
													

													
													
												

												
												

													
													
Example 3: In this example, we will describe the Loader Size Variation.

													
													
												

												
												

													
													


HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>


<html>


 


<head>


    <title>


        Semantic-UI Loader Size Variations


    </title>


 


    <link rel="stylesheet" href=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />


 


    <style>


        .ui.segment {


            padding: 60px 0;


        }


        .height {


            height: 250px;


        }


    </style>


</head>


 


<body>


    <div class="ui container center aligned">


        <h2 style="color:green">


            w3wiki


        </h2>


 


        <h3>Semantic-UI Loader Size Variations</h3>


    </div>


 


    <div class="ui container">


        <div class="ui segment">


            <div class="ui active dimmer">


                <div class="ui mini text loader">


                    w3wiki Mini Size Loading...


                </div>


            </div>


        </div>


 


        <div class="ui segment">


            <div class="ui active dimmer">


                <div class="ui tiny text loader">


                    w3wiki Tiny Size Loading...


                </div>


            </div>


        </div>


 


        <div class="ui segment">


            <div class="ui active dimmer">


                <div class="ui small text loader">


                    w3wiki Small Size Loading...


                </div>


            </div>


        </div>


 


        <div class="ui segment">


            <div class="ui active dimmer">


                <div class="ui medium text loader">


                    w3wiki Medium Size Loading...


                </div>


            </div>


        </div>


 


        <div class="ui segment">


            <div class="ui active dimmer">


                <div class="ui large text loader">


                    w3wiki Large Size Loading...


                </div>


            </div>


        </div>


 


        <div class="ui segment">


            <div class="ui active dimmer">


                <div class="ui big text loader">


                    w3wiki Big Size Loading...


                </div>


            </div>


        </div>


 


        <div class="ui segment">


            <div class="ui active dimmer">


                <div class="ui huge text loader">


                    w3wiki Huge Size Loading...


                </div>


            </div>


        </div>


 


        <div class="ui segment">


            <div class="ui active dimmer">


                <div class="ui massive text loader">


                    w3wiki Massive Size Loading...


                </div>


            </div>


        </div>


 


        <div class="height"></div>


    </div>


</body>


 


</html>



















                        







                        









													
													
												

												
												

													
													
Output:

													
													
												

												
												

													
													

													
													
												

												
												

													
													
Example 4: In this example, we will describe the Loader Inverted Variation.

													
													
												

												
												

													
													


HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>


<html>


 


<head>


    <title>


        Semantic-UI Loader Inverted Variations


    </title>


 


    <link rel="stylesheet" href=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />


 


    <style>


        .ui.segment {


            padding: 60px 0;


        }


    </style>


</head>


 


<body>


    <div class="ui container center aligned">


        <h2 style="color:green">


            w3wiki


        </h2>


 


        <h3>Semantic-UI Loader Inverted Variations</h3>


    </div>


 


    <div class="ui container">


        <div class="ui segment">


            <div class="ui active inverted dimmer">


                <div class="ui text loader">


                    w3wiki Loading...


                </div>


            </div>


        </div>


    </div>


</body>


 


</html>



















                        







                        









													
													
												

												
												

													
													
Output:

													
													
												

												
												

													
													

													
													
												

												
												

													
													
Reference: https://semantic-ui.com/elements/loader.html

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
													
											

											
										

									

									

										
										
Tags:

										
										#Geeks-Premier-League-2022
										
										#Semantic-UI
										
										#Semantic-UI Elements
										
										#CSS
										
										#Geeks Premier League
										
										#Web Technologies
										
										

									

									

										

											
											
												
												Semantic-UI Loader States
											
											
										

										

											
											
												Semantic-UI | Placeholder