Skip to content

Instantly share code, notes, and snippets.

@leonkoech

leonkoech/css-gauge-4-colours.markdown

Last active July 10, 2022 09:00
Show Gist options
  • Save leonkoech/0619fbfcf6e3f72e64c471c83c511d70 to your computer and use it in GitHub Desktop.
Save leonkoech/0619fbfcf6e3f72e64c471c83c511d70 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Gauge - 4 colours
Raw
index.html
<h1>Dynamic Gauge - 3 levels</h1>
<div class="gauge-wrapper">
<div class="test">
<div class="align-btm"><small>0%</small></div>
<div class="align-cntr"><small>25%</small></div>
<div><small>50%</small></div>
<div class="align-cntr"><small>75%</small></div>
<div class="align-btm"><small>100%</small></div>
</div>
<div class="gauge four">
<div class="slice-colors">
<div class="st slice-item"></div>
<div class="st slice-item"></div>
<div class="st slice-item"></div>
<div class="st slice-item"></div>
</div>
<div id="needle" class="needle"></div>
<div class="gauge-center"></div>
</div>
<p><strong id="percentage">0</strong></p>
<button onclick='gauge(75)'>animate</button>
</div>
<div>
</div>
Raw
script.js
function gauge(percentage) {
let anim = null;
const needle = document.getElementById("needle");
const text = document.getElementById("percentage")
let rotation = 0;
clearInterval(anim);
anim = setInterval(frame, 5);
finalPoint = parseInt(percentage*1.8)
function frame() {
if (rotation == finalPoint) {
clearInterval(anim);
} else {
rotation++;
text.innerHTML = `${parseInt(rotation/1.8)}%`;
needle.style.display = 'block';
needle.style.transform = `rotate(${rotation}deg)`;
}
}
}
Raw
style.css
body {height: 100vh; font-family: Arial; text-align:center; font-family: Arial, Helvetica, sans-serif;}
h1 {text-align:center;}
.test{
position: absolute;
z-index:12;
width: 320px;
display: flex;
height:140px;
flex-direction: row;
}
.test div{
margin-left: 35px;
display: flex;
flex-direction: column;
}
.align-btm{
height: 100%;
justify-content: end;
}
.align-cntr{
justify-content: center;
height: 70%;
}
.test div:nth-child(1){
margin-left: -5px;
}
.test div:nth-child(4){
margin-left: 70px;
}
.test div:nth-child(3){
margin-left: 75px;
}
.test div:nth-child(5){
margin-left: 10px;
}
.test div:nth-child(2){
margin-left: 13px;
}
.gauge-wrapper {
display: inline-block;
width: auto;
margin: 0 auto;
}
.gauge {
background: #ffffff;
width: 240px;
height: 120px;
border-radius: 120px 120px 0 0!important;
position: relative;
overflow: hidden;
margin: 20px 20px 0px 20px;
}
.gauge.min-scaled {
transform: scale(0.5);
}
.gauge-center {
content: '';
color: #fff;
width: 70%;
height: 70%;
background: #ffffff;
border-radius: 140px 140px 0 0!important;
position: absolute;
right: 15%;
bottom: 0;
color: #fff;
z-index:10;
}
.needle {
width: 100px;
height: 5px;
background: #000000;
border-bottom-left-radius: 100%!important;
border-bottom-right-radius: 5px!important;
border-top-left-radius: 100%!important;
border-top-right-radius: 5px!important;
position: absolute;
bottom: 0px;
left: 20px;
transform-origin: 100% 4px;
transform: rotate(0deg);
display:block;
z-index:11;
}
.slice-colors {height:100%;}
.slice-colors .st {
position: absolute;
bottom: 0;
width: 0;
height: 0;
border: 80px solid transparent;
}
.four .slice-colors .st.slice-item:nth-child(2) {
border-top: 80px #E84C3D solid;
border-right: 80px #E84C3D solid;
background-color:#E84C3D;
}
.four .slice-colors .st.slice-item:nth-child(4) {
left:50%;
border-bottom: 80px #1eaa59 solid;
border-right: 80px #1eaa59 solid;
background-color:#f1c40f;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment