Creating a fixed 5-round assessment using CSS / HTML

Question

I am trying to create a 5-rating system using only CSS and HTML (see image below, for which I would like), but I'm not sure how to do it.

My initial idea was to make 5 circles, and then somehow use them as a mask for the background color, which is the full width of all 5 circles. Thus, the first image has a width of 90% with background color #4a494a , and the second image has a width of 60% and again the background color #4a494a .

These circles are fixed, so no interaction is required to draw them.

Does anyone have any ideas on how I can do this?

Answer 1

You can do this using a pseudo element ( .rating:after ) that sits on top of div.rating . .rating has linear-gradient , whose background-size determines which part of the circle is filled, and in .rating:after there is radial-gradient , which creates five circles that act like masks).

I used animation to show how the circle fills as the background-size increases. You can set the required background-size using JS (or any internal code that generates a rating element), and then add it using the built-in styles in div.rating .

Using this approach, even between ratings (or ratings of any value, for example 3.65, 2.25, 1.85, etc.), you can easily cope by simply calculating the required background-size . I added some examples in the demo.

 .rating { position: relative; height: 50px; width: 250px; background: linear-gradient(to right, black, black); background-repeat: no-repeat; background-position: 0px 0px; background-size: 0px 100%; } .rating.auto-anim { animation: fill-circle 5s ease infinite; } .rating:after { position: absolute; content: ''; height: 100%; width: 100%; background: radial-gradient(20px at center, transparent 7.5px, beige 9px); background-position: 0px 0px; background-size: 50px 100%; border: 1px solid; } @keyframes fill-circle { to { background-size: 100% 100%; } } 

 <div class='rating auto-anim'></div> <div class='rating' style="background-size: 50px 100%;"></div> <!-- rating of 1 --> <div class='rating' style="background-size: 75px 100%;"></div> <!-- rating of 1.5 --> <div class='rating' style="background-size: 121.25px 100%;"></div> <!-- rating of 2.25 --> <div class='rating' style="background-size: 228.75px 100%;"></div> <!-- rating of 4.75 --> <div class='rating' style="background-size: 177.25px 100%;"></div> <!-- rating of 3.65 --> <div class='rating' style="background-size: 80.25px 100%;"></div> <!-- rating of 1.85 --> <!-- Background Size Calculation Logic: Each circle is only 15px wide with 17.5px gap on either side 1 rating = 50px (for 1 circle) 1.5 rating = 50px (for 1 circle) + 17.5px (gap before 2nd circle on left) + 7.5px (.5 of 15px circle) 2.25 rating = 100px (for 2 circles) + 17.5px (gap before 3rd circle on left) + 3.75px (.25 of 15px circle) 4.75 rating = 200px (for 4 circles) + 17.5px (gap before 5th circle on left) + 11.25px (.75 of 20px circle) 3.65 rating = 150px (for 3 circles) + 17.5px (gap before 4th circle on left) + 9.75px (.65 of 20px circle) 1.85 rating = 50px (for 1 circle) + 17.5px (gap before 2nd circle on left) + 12.75px (.85 of 20px circle) --> 

Answer 2

This can be done with a little and light amount of CSS to be able to create the desired effect.

 .rating { direction: rtl; text-align: center; } .rating > span { display: inline-block; position: relative; box-sizing: border-box; width: 20px; height: 20px; border: 1px solid black; border-radius: 10px; } .rating > span:hover, .rating > span:hover ~ span { background: transparent; } .rating > span:hover:before, .rating > span:hover ~ span:before { content: ""; position: absolute; left: -2px; top: -2px; background: gold; width: 20px; height: 20px; border: 1px solid gold; border-radius: 20px; } 

 <div class="rating"> <span></span><span></span><span></span><span></span><span></span> </div> 

This is a variant of Star Ratings developed by css-tricks.com. Click here to find out more!

Answer 3

If you use some kind of smart css along with some radio inputs, you can achieve this with pure css and html, and even keeping it interactive . Look at the script I installed: https://jsfiddle.net/2rs79wsh/

 #ratings { font-size: 0; } #ratings * { float: right; } #ratings input { display: none; } #ratings label { width: 20px; height: 40px; background-color: #ccc; display: inline-block; } #ratings label:nth-of-type(even) { border-top-left-radius: 20px; border-bottom-left-radius: 20px; margin-left: 10px; } #ratings label:nth-of-type(odd) { border-top-right-radius: 20px; border-bottom-right-radius: 20px; margin-right: 10px; } #ratings input:checked ~ label { background-color: red; } 

 <div id="ratings"> <input type="radio" id="rating-10" name="rating" value="10"> <label for="rating-10"></label> ... <input type="radio" id="rating-1" name="rating" value="1" checked=checked> <label for="rating-1"></label> </div> 

The circles you see are labels for the inputs. The order is canceled (using float right), so you can use the ~ selector to display the status of all siblings following the checked one. There is a radio to save the state and even allow you to submit any changes by sending it to the form. Each circle consists of two labels, so depending on which half of the circle you click on, you will get a different rating. The odd / even selectors move the two halves together to make them look like one circle.

Feel free to ask, something is unclear!

Answer 4

There should be a lot of snippets and codes for here you can find what you are looking for, and if you want a bit of style I would ask you to check this one . In the first example, the rating is controlled by the width style="width: 68%" on each div s.

Answer 5

You can do this quite easily with psuedo elements: HTML

 <ul> <li></li> <li></li> <li></li> <li></li> <li class="half"></li> </ul> 

CSS

 ul { display:block; } li { display:inline-block; list-style: none; width:20px; height:20px; border-radius:50%; background-color:orange; overflow:hidden; position:relative; } li::after { position:absolute; content: ''; background-color:rgba(0,0,0,.5); display:block; width:20px; height:20px; top:0; left:0; } li.half::after { left:-10px; } 

Fiddle https://jsfiddle.net/fz2qo82m/

You would simply adjust the class on the last lap (or the last pair, you could add a class none if the rating is less than 4 laps)