CSS से यूजर रेटिंग स्कोरकार्ड (स्टार + प्रोग्रेस बार) कैसे बनाएं?

रेटिंग स्कोरकार्ड में समग्र स्टार रेटिंग (Font Awesome), औसत स्कोर, और प्रत्येक स्टार स्तर के लिए प्रोग्रेस बार होता है। फ्लोट लेआउट से लेबल, बार, काउंट संरेखित। रो क्लियरफिक्स के साथ।

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
  <style>
    * { box-sizing: border-box; }
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; margin: 30px; max-width: 800px; padding: 20px; }
    .rateHeader { font-size: 25px; margin-right: 25px; }
    .fa { font-size: 25px; color: grey; }
    .rated { color: rgb(255, 0, 0); border: 2px solid yellow; }
    .data { float: left; width: 15%; margin-top: 10px; font-weight: bold; }
    .progressBar { margin-top: 10px; float: left; width: 70%; }
    .right { text-align: right; }
    .row:after { content: ""; display: table; clear: both; }
    .progressContainer {
      width: 100%; background-color: #f1f1f1; text-align: center;
      color: white; border-radius: 10px;
    }
    .bar-1, .bar-2, .bar-3, .bar-4, .bar-5 { border-radius: 10px; }
    .bar-5 { width: 70%; height: 18px; background-color: rgb(76, 175, 162); }
    .bar-4 { width: 50%; height: 18px; background-color: rgb(243, 222, 33); }
    .bar-3 { width: 20%; height: 18px; background-color: #12d400; }
    .bar-2 { width: 65%; height: 18px; background-color: #ff0055; }
    .bar-1 { width: 40%; height: 18px; background-color: #a836f4; }
  </style>
</head>
<body>
  <span class="rateHeader">User Rating</span>
  <span class="fa fa-star rated"></span>
  <span class="fa fa-star rated"></span>
  <span class="fa fa-star rated"></span>
  <span class="fa fa-star rated"></span>
  <span class="fa fa-star"></span>
  <p>3.9 average based on 200 foodies.</p>
  <div class="row">
    <div class="data"><div>5 star</div></div>
    <div class="progressBar"><div class="progressContainer"><div class="bar-5"></div></div></div>
    <div class="data right"><div>120</div></div>
    <div class="data"><div>4 star</div></div>
    <div class="progressBar"><div class="progressContainer"><div class="bar-4"></div></div></div>
    <div class="data right"><div>110</div></div>
    <div class="data"><div>3 star</div></div>
    <div class="progressBar"><div class="progressContainer"><div class="bar-3"></div></div></div>
    <div class="data right"><div>30</div></div>
    <div class="data"><div>2 star</div></div>
    <div class="progressBar"><div class="progressContainer"><div class="bar-2"></div></div></div>
    <div class="data right"><div>20</div></div>
    <div class="data"><div>1 star</div></div>
    <div class="progressBar"><div class="progressContainer"><div class="bar-1"></div></div></div>
    <div class="data right"><div>12</div></div>
  </div>
</body>
</html>

आउटपुट

उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:

मुख्य बिंदु

• Font Awesome स्टार - fa-star, .rated लाल+पीला बॉर्डर
• फ्लोट लेआउट - .data (15%), .progressBar (70%), .data.right (15%)
• क्लियरफिक्स - .row:after { clear: both }
• रंगीन बार - प्रत्येक स्टार स्तर के लिए अलग रंग
• बॉर्डर-रेडियस - कंटेनर और बार दोनों पर 10px
• काउंट दाएं - text-align: right