Semantic-UI | Rating Last Updated : 28 May, 2020 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 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= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 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= "https://code.jquery.com/jquery-3.1.1.min.js" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </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= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 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= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </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= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 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= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> <script> $('.rating').rating(); </script> </body> </html> Output: Example: <!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div style="margin-top: 100px" class="ui container"> <h3>Rating to Image</h3> <img class="ui medium rounded image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200517214450/image30.png"> <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= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> <script> $('.rating').rating(); </script> </body> </html> Output: Example: Different Size Rating <!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 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= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> <script> $('.rating').rating(); </script> </body> </html> Output: Like Article Suggest improvement Previous Semantic-UI Progress Variations Next Semantic-UI Rating Types Share your thoughts in the comments Add Your Comment Please Login to comment...