I am facing an issue while trying to resize this gauge element. Whenever I attempt to modify the container class to make it smaller, the entire gauge ends up distorting. Changing the position to relative seems to cause glitches at the edge of the gauge. Any suggestions on how to properly scale this without compromising the design? My ultimate goal is to embed this gauge within a column in Bootstrap and I need it to function correctly at a basic level. Any insights or advice on this CSS problem would be greatly appreciated.
const Gauge = Vue.extend({
template: `
<div class="container">
<div class="gauge-bg"></div>
<div class="gauge-middle"></div>
<div class="gauge-overlay" :style="{ transform: rotate }"></div>
<div class="gauge-data">
<span>{{ percentage }}%</span>
</div>
</div>
`,
props: ['percentage'],
computed: {
rotate() {
const v = this.percentage * 180 / 100;
return `rotate(${v}deg)`;
} } });
new Vue({
el: '#app',
components: {
Gauge
}
});body {
background-color: #4d4d4d;
}
.container {
width: 400px;
height: 200px;
position: absolute;
top: 0;
overflow: hidden;
}
.gauge-bg {
z-index: 1;
width: 400px;
height: 200px;
position: absolute;
background-color: #a3f6ba;
border-radius: 250px 250px 0 0;
}
.gauge-middle {
z-index: 3;
position: absolute;
background-color: #4d4d4d;
width: 250px;
height: calc(250px / 2);
top: 75px;
margin-left: 75px;
margin-right: auto;
border-radius: 250px 250px 0 0;
}
.gauge-overlay {
z-index: 2;
position: absolute;
background-color: #5df086;
width: 400px;
height: 200px;
top: 200px;
border-radius: 0 0 200px 200px;
transform-origin: center top;
}
.gauge-data {
z-index: 4;
color: #5df086;
position: absolute;
width: 400px;
bottom: 0;
text-align: center;
font-size: 24px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<gauge percentage="33"></gauge>
</div>