Open In App

Semantic-UI Icon Set Spinners

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is a UI framework based on less and jQuery. It is used to make beautiful and responsive websites. In this article, we will be seeing the Spinners Icon Set provided by Semantic UI. There are a total of 15 icons in the Spinners Icon Set which can be used to tell the user that something is loading in the background.

Semantic-UI Icon Set Spinners Classes:

  • asterisk: This class is used to show the asterisk icon.
  • certificate: This class is used to show the certificate icon.
  • circle notch: These classes are used to show the notched circle icon.
  • cog: This class is used to show the cog icon.
  • compass: This class is used to show the compass icon.
  • compass outline: These classes are used to show the outlined compass icon.
  • crosshairs: This class is used to show the cross-hair icon.
  • life ring: These classes are used to show the life ring icon.
  • life ring outline: These classes are used to show the outlined life ring icon.
  • snowflake: This class is used to show the snowflake icon.
  • snowflake outline: These classes are used to show the outlined snowflake icon.
  • spinner: This class is used to show the spinner icon.
  • sun: This class is used to show the sun icon.
  • sun outline: These classes are used to show the outlined sun icon.
  • sync: This class is used to show the sync icon.

Syntax:

<i class="icon asterisk"></i>

Example 1: The example below illustrates the use of all 15 icons listed above.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Icon Set Spinners</title>
    <!-- Scripts and CSS -->
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
  
    <style>
        .ui.container {
            text-align: center;
        }
  
        h4 {
            margin-top: 0px;
        }
  
        .ui.grid {
            margin-top: 30px !important;
        }
    </style>
</head>
  
<body>
    <div class="ui container">
        <div>
            <h1 style="color: green;">GeeksforGeeks</h1>
            <h4>Semantic UI - Icon Set Spinners</h4>
        </div>
        <div class="ui grid">
            <div class="four wide column">
                <i class="icon big asterisk"></i>
            </div>
            <div class="four wide column">
                <i class="icon big certificate"></i>
            </div>
            <div class="four wide column">
                <i class="icon big circle notch"></i>
            </div>
            <div class="four wide column">
                <i class="icon big cog"></i>
            </div>
            <div class="four wide column">
                <i class="icon big compass"></i>
            </div>
            <div class="four wide column">
                <i class="icon big compass outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon big crosshairs"></i>
            </div>
            <div class="four wide column">
                <i class="icon big life ring"></i>
            </div>
            <div class="four wide column">
                <i class="icon big life ring outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon big snowflake"></i>
            </div>
            <div class="four wide column">
                <i class="icon big snowflake outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon big spinner"></i>
            </div>
            <div class="four wide column">
                <i class="icon big sun"></i>
            </div>
            <div class="four wide column">
                <i class="icon big sun outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon big sync"></i>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Semantic-UI Icon Set Spinners

Semantic UI – Icon Set Spinners

Example 2: The example below shows the use of Spinners Set icons with different colors.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Icon Set Spinners</title>
    <!-- Scripts and CSS -->
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
  
    <style>
        .ui.container {
            text-align: center;
        }
  
        h4 {
            margin-top: 0px;
        }
  
        .ui.grid {
            margin-top: 30px !important;
        }
    </style>
</head>
  
<body>
    <div class="ui container">
        <div>
            <h1 style="color: green;">GeeksforGeeks</h1>
            <h4>Semantic UI - Icon Set Spinners 
                with Colors Variation</h4>
        </div>
        <div class="ui grid">
            <div class="four wide column">
                <i class="icon red big asterisk"></i>
            </div>
            <div class="four wide column">
                <i class="icon yellow big certificate"></i>
            </div>
            <div class="four wide column">
                <i class="icon orange big circle notch"></i>
            </div>
            <div class="four wide column">
                <i class="icon olive big cog"></i>
            </div>
            <div class="four wide column">
                <i class="icon green big compass"></i>
            </div>
            <div class="four wide column">
                <i class="icon teal big compass outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon blue big crosshairs"></i>
            </div>
            <div class="four wide column">
                <i class="icon violet big life ring"></i>
            </div>
            <div class="four wide column">
                <i class="icon purple big life ring outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon pink big snowflake"></i>
            </div>
            <div class="four wide column">
                <i class="icon brown big snowflake outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon grey big spinner"></i>
            </div>
            <div class="four wide column">
                <i class="icon violet big sun"></i>
            </div>
            <div class="four wide column">
                <i class="icon blue big sun outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon big sync"></i>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Semantic-UI Icon Set Spinners

Semantic UI – Icon Set Spinners with Colors Variation

Example 3: The example below shows the use of Spinners set icons with size variation.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Icon Set Spinners</title>
    <!-- Scripts and CSS -->
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
  
    <style>
        .ui.container {
            text-align: center;
        }
  
        h4 {
            margin-top: 0px;
        }
  
        .ui.grid {
            margin-top: 30px !important;
        }
    </style>
</head>
  
<body>
    <div class="ui container">
        <div>
            <h1 style="color: green;">GeeksforGeeks</h1>
            <h4>Semantic UI - Icon Set Spinners
                with Sizes Variation</h4>
        </div>
        <div class="ui grid">
            <div class="four wide column">
                <i class="icon small asterisk"></i>
            </div>
            <div class="four wide column">
                <i class="icon small certificate"></i>
            </div>
            <div class="four wide column">
                <i class="icon small circle notch"></i>
            </div>
            <div class="four wide column">
                <i class="icon cog"></i>
            </div>
            <div class="four wide column">
                <i class="icon compass"></i>
            </div>
            <div class="four wide column">
                <i class="icon compass outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon large crosshairs"></i>
            </div>
            <div class="four wide column">
                <i class="icon large life ring"></i>
            </div>
            <div class="four wide column">
                <i class="icon large life ring outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon big snowflake"></i>
            </div>
            <div class="four wide column">
                <i class="icon big snowflake outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon big spinner"></i>
            </div>
            <div class="four wide column">
                <i class="icon huge sun"></i>
            </div>
            <div class="four wide column">
                <i class="icon huge sun outline"></i>
            </div>
            <div class="four wide column">
                <i class="icon huge sync"></i>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Semantic-UI Icon Set Spinners

Semantic UI – Icon Set Spinners with Sizes Variation

Reference: https://semantic-ui.com/elements/icon.html#spinners



Last Updated : 27 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads