Добрый день, столкнулся с такой проблемой
Есть Круговой прогресс бар, и 5 звезд, при нажатии на 1 звезду соответственно 20% на баре должно показывать и так далее
есть бар и есть звезды, как слепить воедино - не доходит
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
.rait_wrapp .circle {
background-color: #cfcfcf;
width: 120px;
height: 120px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
position: relative;
}
.rait_wrapp .circle .circle1 {
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 120px;
clip: rect(0px, 120px, 120px, 60px);
}
.rait_wrapp .circle .circle1 .slice1 {
position: absolute;
width: 120px;
height: 120px;
clip: rect(0px, 60px, 120px, 0px);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
background-color: #ff8a20;
border-color: #ff8a20;
-moz-transform: rotate(0);
-webkit-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
.rait_wrapp .circle .circle2 {
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 120px;
clip: rect(0, 60px, 120px, 0px);
}
.rait_wrapp .circle .circle2 .slice2 {
position: absolute;
width: 120px;
height: 120px;
clip: rect(0px, 120px, 120px, 60px);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
background-color: #ff8a20;
border-color: #ff8a20;
-moz-transform: rotate(0);
-webkit-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
.rait_wrapp .circle .status {
position: absolute;
top: 20px;
left: 20px;
width: 80px;
height: 80px;
padding-top: 13px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
font-family: "Source Sans Pro", sans-serif;
font-style: normal;
font-weight: 300;
font-size: 25px;
text-align: center;
color: #4e4e4e;
line-height: 50px;
background: #fff;
}
.rait_wrapp .stars {
display: inline-block;
margin: 10px 0;
}
.rait_wrapp .stars input:checked + label {
border: none;
background: inherit;
}
.rait_wrapp .stars input {
display: none;
}
.rait_wrapp .stars label {
float: right;
padding: 3px;
font-size: 18px;
color: #cfcfcf;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
border: none;
background: inherit;
}
.rait_wrapp .stars input.star:checked ~ label.star:before {
content: '\f005';
color: #ff8a20;
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
-ms-transition: all 0.25s;
-o-transition: all 0.25s;
}
.rait_wrapp .stars input.star-5:checked ~ label.star:before {
color: #ff8a20;
text-shadow: 0 0 20px #ff8a20;
}
.rait_wrapp .stars input.star-1:checked ~ label.star:before {
color: #ff8a20;
}
.rait_wrapp .stars label.star:hover {
transform: rotate(15deg) scale(1.3);
color: #ff8a20;
}
.rait_wrapp .stars label.star:before {
content: '\f006';
font-family: FontAwesome;
}
</style>
<div class="rait_wrapp">
<div class="circle">
<div class="circle1">
<div class="slice1"></div>
</div>
<div class="circle2">
<div class="slice2"></div>
</div>
<div class="status"></div>
</div>
<div class="stars">
<form action="">
<input class="star star-5" id="star-5" type="radio" name="star"/>
<label class="star star-5" for="star-5"></label>
<input class="star star-4" id="star-4" type="radio" name="star"/>
<label class="star star-4" for="star-4"></label>
<input class="star star-3" id="star-3" type="radio" name="star"/>
<label class="star star-3" for="star-3"></label>
<input class="star star-2" id="star-2" type="radio" name="star"/>
<label class="star star-2" for="star-2"></label>
<input class="star star-1" id="star-1" type="radio" name="star"/>
<label class="star star-1" for="star-1"></label>
</form>
</div>
<script>
$(document).ready(function () {
var bar = $('.circle');
progressBarUpdate(37, 100, bar);
});
function rotate(element, degree) {
element.css({
'-webkit-transform': 'rotate(' + degree + 'deg)',
'-moz-transform': 'rotate(' + degree + 'deg)',
'-ms-transform': 'rotate(' + degree + 'deg)',
'-o-transform': 'rotate(' + degree + 'deg)',
'transform': 'rotate(' + degree + 'deg)',
'zoom': 1
});
}
function progressBarUpdate(x, outOf, elem) {
var firstHalfAngle = 180;
var secondHalfAngle = 0;
var drawAngle = x / outOf * 360;
if (drawAngle <= 180) {
firstHalfAngle = drawAngle;
} else {
secondHalfAngle = drawAngle - 180;
}
rotate(elem.find(".slice1"), firstHalfAngle);
rotate(elem.find(".slice2"), secondHalfAngle);
elem.find(".status").html(x + "<span>%</span>");
}
</script>
</body>
</html>
