Open In App

Semantic-UI | Loader

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.

The loader can be really useful when you are Loading your website or using asynchronous loading and want the user to show Loading.

Below are the examples of some loaders:

Example 1: In this example, we will create a simple loader.




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
    <body>
        <div class="ui container">
            <h2>Loader</h2>
            <div class="ui segment">
                <p></p>
                <div class="ui active dimmer">
                    <div class="ui loader"></div>
                </div>
            </div>
        </div>
        <script src=
        </script>
    </body>
</html>


Output:

Example 2: In this example, we will create a text loader.




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
    <body>
        <div class="ui container">
            <h2>Text Loader</h2>
            <div style="height: 120px; width: 500px;" 
                 class="ui segment">
                <div class="ui active dimmer">
                    <div class="ui text loader">
                     Loading
                    </div>
                </div>
                <p></p>
            </div>
        </div>
        <script src=
        </script>
    </body>
</html>


Output:

Example 3: Here we will see Intermediate Loader (this you can use when you don’t know how long its gonna take).




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
    <body>
        <div class="ui container">
            <h2>Indeterminate Loader</h2>
            <div style="height: 120px; width: 500px;" 
                 class="ui segment">
                <div class="ui active dimmer">
                    <div class="ui indeterminate text loader">
                         Fetching Data</div>
                </div>
                <p></p>
            </div>
        </div>
        <script src=
        </script>
    </body>
</html>


Output:

Example 4: In this example, we will create different Size of Loader.




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
    <body>
        <div class="ui container">
            <h2>Different Size Loader Loader</h2>
            <div style="height: 50px; width: 500px;" 
                 class="ui segment">
                <div class="ui active dimmer">
                    <div class="ui mini text loader">
                     Loading
                    </div>
                </div>
                <p></p>
            </div>
            <div style="height: 50px; width: 500px;" 
                 class="ui segment">
                <div class="ui active dimmer">
                    <div class="ui tiny text loader">
                      Loading
                    </div>
                </div>
                <p></p>
            </div>
            <div style="height: 80px; width: 500px;" 
                 class="ui segment">
                <div class="ui active dimmer">
                    <div class="ui small text loader">
                      Loading
                    </div>
                </div>
                <p></p>
            </div>
            <div style="height: 100px; width: 500px;" 
                 class="ui segment">
                <div class="ui active dimmer">
                    <div class="ui medium text loader">
                      Loading
                    </div>
                </div>
                <p></p>
                <p></p>
            </div>
        </div>
        <script src=
        </script>
    </body>
</html>


Output:

Note: You can also use other size classes also like large, huge, and massive.



Last Updated : 11 May, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads