Display stars rating around rounded profile image [CSS] - html

Question

Hi guys i'm creating rating system and i want to display the stars elements around profile image. I have profile image set to border-radius 50% which makes it rounded, but i'm struggle to set the div with the rates on the bottom of the profile image, what i'm looking for is something like this:
Example
What i have by now it's this:
body{
box-sizing: border-box;
margin: 0 auto;
background-color: #fff;
}
.avatar-inner{
width: 100px;
height: 100px;
}
.avatar{
width: 100%;
border-radius: 50%;
}
.rate-holder{
font-size: 25px;
color: #fff;
background-color: #000;
}
<div class="avatar-holder">
<div class="avatar-inner">
<img class="avatar" src="https://i.ibb.co/bmfXcFw/avatar.png" alt="" srcset="">
<div class="rate-holder">
<span>*</span>
</div>
</div>
</div>

Answer 1

[1]
As #RenevanderLende mentioned in comments for doing that you can use
transform:rotate() translateX();
Here's an example:
and I should mention that in provided example you have to set icon
sizes and their margins manually to match your photo-container
dimensions
// icons count
const count = 5;
// icons size in px
const size = 18;
// icons margin in px
const marign = 4;
// icons position in deg
// e.g. if you wanna position all icons at the bottom side use: 55
// e.g. if you wanna position all icons at the left side use: 120
// e.g. if you wanna position all icons at the top side use: 240
// e.g. if you wanna position all icons at the right side use: 330
const position = 0;
// get list of all photo containers
const photoContainer = document.querySelectorAll(".photo-container");
// loop through each container and generate rating stars
[...photoContainer].forEach((container) => {
// gets radius of the container
const r = container.offsetHeight / 2;
const offset = (size / Math.PI) * -1;
const ratingContainer = document.createElement("div");
ratingContainer.className = "rating-container";
const iconsHolder = document.createElement("div");
iconsHolder.className = "icons-holder";
const pos = [];
for (let i = 0; i < count; i++) {
// creates the angles array
pos.push(i * (size + offset + marign));
// creates some holders in a circularly positioned way, to hold the rating stars
const div = document.createElement("div");
div.style.position = "absolute";
div.style.display = "block";
div.style.height = `${size}px`;
div.style.width = `${size}px`;
// sets the icons positions circularly
div.style.transform = `rotate(${pos[i]}deg) translateX(${r - size + Math.abs(offset)}px)`;
// creates the star icons
const icon = document.createElement("span");
icon.className = "icon fa fa-star";
icon.style.fontSize = `${size}px`;
// arranges icons vertically(90deg)
// remove this part to see what happens
icon.style.transform = `rotate(${pos[i] * -1}deg)`;
div.append(icon);
iconsHolder.append(div);
}
// changes the all icons position
iconsHolder.style.transform = `rotate(${position}deg)`;
ratingContainer.append(iconsHolder);
container.append(ratingContainer);
});
.photo-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
.rating-container {
position: absolute;
inset: 0;
}
.rating-container .icons-holder {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.icons-holder>div {
cursor: pointer;
}
.icons-holder>div .icon {
color: orange;
}
.icons-holder>div .icon:hover {
color: darkgoldenrod;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="photo-container">
<img style="width: 100%;" src="https://i.ibb.co/bmfXcFw/avatar.png" />
</div>
<div class="photo-container">
<img style="width: 100%;" src="https://i.ibb.co/bmfXcFw/avatar.png" />
</div>
Update:
[2]
You can also do it without using css transform (explanations are provided as comments in code.)
Example 1:
function ratingStars(root, options) {
// returns width and height of an element
const getRadius = (element) => {
return Math.round(element.offsetWidth / 2);
};
// takes radius, degrees returns x,y
const pos = (r, theta) => {
return {
// theta * (Math.PI / 180) converts radians to degrees
x: Math.round(r * Math.cos(theta * (Math.PI / 180))),
y: Math.round(r * Math.sin(theta * (Math.PI / 180))),
};
};
// default options
let op = {
count: 6,
icons_class: "rating-icons",
rotate: 0, // deg
clock_wise: true, // boolean
size: 28, // pt
icons_margin: 3.8, // px
edge_margin: 0, // px
};
// merges custom options with defaults
op = { ...op,
...options
};
// gets radius of the root element
const radius = getRadius(root); //pixels
if (radius) {
// creates the main holder of all icons
const rating = document.createElement("div");
rating.style.position = "absolute";
// moves the holder to the center of the root element
rating.style.left = `${radius - op.size / 2}px`;
rating.style.top = `${radius - op.size / 2}px`;
root.append(rating);
// generates the required degrees based on count and pushes to the degs
let degs = [];
// runs if the clock_wise is set on true
if (op.clock_wise == true)
for (let i = 0; i < op.count; i++) degs.push(Math.round(i * (op.size / Math.PI + op.icons_margin)));
// runs if the clock_wise is set on false
else
for (let i = 0; i < op.count; i++) degs.push(-Math.round(i * (op.size / Math.PI + op.icons_margin)));
// loops through the degrees and create a holder for each icon
degs.forEach((deg) => {
// creates a holder for each icon
let icon = document.createElement("div");
icon.style.position = "absolute";
icon.style.textAlign = "center";
// positions the holders in a circular way using pos() function that we created first
icon.style.left = `${pos(radius - op.size / 2 - op.edge_margin, deg + op.rotate).x}px`;
icon.style.top = `${pos(radius - op.size / 2 - op.edge_margin, deg + op.rotate).y}px`;
// appends the star icons the the holder
icon.innerHTML = `<span style="font-size: ${op.size * 0.75}pt;" class="${op.icons_class} fa fa-star"></span>`;
rating.append(icon);
});
}
}
const avatar = document.querySelector(".avatar");
ratingStars(avatar);
.avatar {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
background: red;
}
.rating-icons {
color: orange;
cursor: pointer;
transition: all 0.5s ease;
}
.rating-icons:hover {
color: yellow;
transform: scale(1.15) rotate(70deg);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="avatar">
<img src="https://i.pravatar.cc/300?img=11" style="height: 100%" />
</div>
Example 2:
(includes an example for each option)
function ratingStars(root, options) {
// returns width and height of an element
const getRadius = (element) => {
if (element.offsetHeight == element.offsetWidth) return Math.round(element.offsetWidth / 2);
else console.error("the given element isn't a circle");
};
// takes radius, degrees returns x,y
const pos = (r, theta) => {
return {
// theta * (Math.PI / 180) converts radians to degrees
x: Math.round(r * Math.cos(theta * (Math.PI / 180))),
y: Math.round(r * Math.sin(theta * (Math.PI / 180))),
};
};
// default options
let op = {
count: 6,
icons_class: "rating-icons",
rotate: 0, // deg
clock_wise: true, // boolean
size: 20, // pt
icons_margin: 8, // px
edge_margin: 0, // px
};
// merges custom options with defaults
op = { ...op,
...options
};
// gets radius of the root element
const radius = getRadius(root); //pixels
if (radius) {
// creates the main holder of all icons
const rating = document.createElement("div");
rating.style.position = "absolute";
// moves the holder to the center of the root element
rating.style.left = `${radius - op.size / 2}px`;
rating.style.top = `${radius - op.size / 2}px`;
root.append(rating);
// generates the required degrees based on count and pushes to the degs
let degs = [];
// runs if the clock_wise is set on true
if (op.clock_wise == true)
for (let i = 0; i < op.count; i++) degs.push(Math.round(i * (op.size / Math.PI + op.icons_margin)));
// runs if the clock_wise is set on false
else
for (let i = 0; i < op.count; i++) degs.push(-Math.round(i * (op.size / Math.PI + op.icons_margin)));
// loops through the degrees and create a holder for each icon
degs.forEach((deg) => {
// creates a holder for each icon
let icon = document.createElement("div");
icon.style.position = "absolute";
icon.style.textAlign = "center";
// positions the holders in a circular way using pos() function that we created first
icon.style.left = `${pos(radius - op.size / 2 - op.edge_margin, deg + op.rotate).x}px`;
icon.style.top = `${pos(radius - op.size / 2 - op.edge_margin, deg + op.rotate).y}px`;
// appends the star icons the the holder
icon.innerHTML = `<span style="font-size: ${op.size * 0.75}pt;" class="${op.icons_class} fa fa-star"></span>`;
rating.append(icon);
});
}
}
const avatars = document.querySelectorAll(".avatar");
ratingStars(avatars[0]);
ratingStars(avatars[1], {
icons_class: 'rating-icons red'
});
ratingStars(avatars[2], {
rotate: 143
});
ratingStars(avatars[3], {
clock_wise: false
});
ratingStars(avatars[4], {
size: 28
});
ratingStars(avatars[5], {
icons_margin: 20
});
ratingStars(avatars[6], {
edge_margin: 20
});
ratingStars(avatars[7], {
count: 4,
icons_class: 'rating-icons green',
rotate: 50,
clock_wise: true,
size: 30,
icons_margin: 40,
edge_margin: 15
});
ratingStars(avatars[8], {
count: 15
});
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background: radial-gradient(circle farthest-corner at 10% 20%, rgba(90, 92, 106, 1) 0%, rgba(32, 45, 58, 1) 81.3%);
}
.avatar {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
background: red;
}
.rating-icons {
color: orange;
cursor: pointer;
transition: all 0.5s ease;
}
.rating-icons:hover {
color: darkgoldenrod;
transform: scale(1.15) rotate(70deg);
}
.red {
color: red;
}
.red:hover {
color: darkred;
}
.green {
color: green;
}
.green:hover {
color: yellowgreen;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div style="display: flex">
<div class="avatar" style="width: 300px; height: 300px;">
<img src="https://i.pravatar.cc/300?random=1" style="height: 100%" />
</div>
</div>
<div style="display: flex">
<div class="avatar">
<img src="https://i.pravatar.cc/300?random=1" style="height: 100%" />
</div>
<div class="avatar">
<img src="https://i.pravatar.cc/300?random=2" style="height: 100%" />
</div>
<div class="avatar">
<img src="https://i.pravatar.cc/300?random=3" style="height: 100%" />
</div>
<div class="avatar">
<img src="https://i.pravatar.cc/300?random=5" style="height: 100%" />
</div>
</div>
<div style="display: flex">
<div class="avatar">
<img src="https://i.pravatar.cc/300?random=6" style="height: 100%" />
</div>
<div class="avatar">
<img src="https://i.pravatar.cc/300?random=7" style="height: 100%" />
</div>
<div class="avatar">
<img src="https://i.pravatar.cc/300?random=8" style="height: 100%" />
</div>
<div class="avatar">
<img src="https://i.pravatar.cc/300?random=4" style="height: 100%" />
</div>
</div>