Skip to content
Related Articles

Related Articles

Semantic-UI | Loader
  • Last Updated : 11 May, 2020

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :