Skip to content
Related Articles

Related Articles

Improve Article

Semantic-UI | Rating

  • Last Updated : 28 May, 2020

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is 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 rating shows the interest of the user in the given content.

Let’s see some examples

Example:

Simple Rating






<!DOCTYPE html>
  <html>
      <head>
          <title>Semantic UI</title>
          <link href=
                 rel="stylesheet" />         
      </head>
      <body>
          <div style="margin-top: 100px" class="ui container"
            <h3>Simple Rating</h3>
            <div class="ui rating" data-max-rating="1"></div>
          </div>
           </div
          <script src=
                 integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
                 crossorigin="anonymous">
           </script>
          <script src=
          </script
          <script>
            $('.rating').rating();
          </script>
      </body>
  </html>

data-max-rating is the max rating you want.
Output:

Example:

Star Rating




<!DOCTYPE html>
  <html>
      <head>
          <title>Semantic UI</title>
          <link href=
                 rel="stylesheet" />         
      </head>
      <body>
          <div style="margin-top: 100px" 
               class="ui container"
            <h3>Star Rating</h3>
  
            <div class="ui star rating" data-rating="3">
             </div>
          </div>
           </div
          <script src="https://code.jquery.com/jquery-3.1.1.min.js" 
                  integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
                  crossorigin="anonymous">
          </script>
          <script src=
          </script
          <script>
            $('.rating').rating();
          </script>
      </body>
  </html>

data-rating is the rating that you want already.
Output:

Example:

Heart Rating




<!DOCTYPE html>
  <html>
      <head>
          <title>Semantic UI</title>
          <link href=
               rel="stylesheet" />         
      </head>
      <body>
          <div style="margin-top: 100px"
               class="ui container"
            <h3>Heart Rating</h3>
            <div class="ui heart rating" 
                 data-rating="4" data-max-rating="5">
           </div>
          </div>
           </div
          <script src="https://code.jquery.com/jquery-3.1.1.min.js" 
                  integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
                  crossorigin="anonymous"></script>
          <script src=
           </script
          <script>
            $('.rating').rating();
          </script>
      </body>
  </html>

Output:

Example:




<!DOCTYPE html>
  <html>
      <head>
          <title>Semantic UI</title>
          <link href=
                rel="stylesheet" />         
      </head>
      <body>
          <div style="margin-top: 100px" class="ui container"
            <h3>Rating to Image</h3>
            <img class="ui medium rounded image" 
                 src=
              
            <div class="ui heart rating" 
                 data-rating="4" data-max-rating="5">
            </div>
          </div>
           </div
          <script src="https://code.jquery.com/jquery-3.1.1.min.js"
                  integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
                   crossorigin="anonymous"></script>
          <script src=
          </script
          <script>
            $('.rating').rating();
          </script>
      </body>
  </html>

Output:

Example:

Different Size Rating




<!DOCTYPE html>
  <html>
      <head>
          <title>Semantic UI</title>
          <link href=
                rel="stylesheet" />         
      </head>
      <body>
          <div style="margin-top: 100px" class="ui container"
            <h3>Various size Rating</h3>
            <h4>Mini</h4>
            <div class="ui mini star rating"></div>
            <h4>Tiny</h4>
            <div class="ui tiny star rating"></div>
            <h4>Small</h4>
            <div class="ui small star rating"></div>
            <h4>Normal</h4>
            <div class="ui star rating"></div>
            <h4>Large</h4>
            <div class="ui large star rating"></div>
            <h4>Huge</h4>
            <div class="ui huge star rating"></div>
            <h4>Massive</h4>
            <div class="ui massive star rating"></div>
           </div
          <script src="https://code.jquery.com/jquery-3.1.1.min.js" 
                  integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
                 crossorigin="anonymous"></script>
          <script src=
          </script
          <script>
            $('.rating').rating();
          </script>
      </body>
  </html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :