Semantic-UI Loader Inline Variation Last Updated : 20 Feb, 2022 Comments Improve Suggest changes Like Article Like Report 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 Inline Variation is used to display the loader element with content inline. Used Class: inline: This class is used to place the loader with content inline. Syntax: <div class="ui active inline loader"></div> Example 1: In this example, we will place the loader to inline. 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"> GeeksforGeeks </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 place different sizes of loader to inline. 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: 30px 0; } </style> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Loader Inline Variations</h3> </div> <div class="ui container"> <div class="ui segment"> <div class="ui active tiny inline loader"></div> </div> <div class="ui segment"> <div class="ui active medium inline loader"></div> </div> <div class="ui segment"> <div class="ui active large inline loader"></div> </div> </div> </body> </html> Output: Reference: https://semantic-ui.com/elements/loader.html#inline Comment More infoAdvertise with us Next Article Semantic-UI Loader Inline Variation A ashokjaiswal Follow Improve Article Tags : Web Technologies CSS Geeks Premier League Geeks-Premier-League-2022 Semantic-UI Semantic-UI Elements +1 More Similar Reads Semantic-UI Loader Inline Center Variation 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 li 2 min read Semantic-UI Loader Inverted Variation 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 li 2 min read Semantic-UI Loader Variations 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 li 4 min read Semantic-UI Header Variations Semantic UI offers many components for users to design their interface. It offers us different types of headers, different types of content holding headers, states of header in different variations. In this article, we will learn about the Semantic UI Header Variations. Header variations have many v 3 min read Semantic-UI Loader Size Variation 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 li 3 min read Like