Author: | JohnrBell |
---|---|
Views Total: | 67,812 views |
Official Page: | Go to website |
Last Update: | March 12, 2015 |
License: | MIT |
Preview:

Description:
A pure CSS solution to create pretty, fast and responsive bar gauges which can be used for counter, progress bar, or anything else.
How to use it:
Build the Html structure for the gauge.
<div class="container"> <div class="gauge-a"></div> <div class="gauge-b"></div> <div class="gauge-c"></div> <div class="gauge-data"> <h1 id="percent">0%</h1> </div> </div>
The required CSS styles.
.container { width: 400px; height: 200px; position: absolute; top: 30%; left: 50%; overflow: hidden; text-align: center; transform: translate(-50%, -50%); } .gauge-a { z-index: 1; position: absolute; background-color: rgba(255,255,255,.2); width: 400px; height: 200px; top: 0%; border-radius: 250px 250px 0px 0px; } .gauge-b { z-index: 3; position: absolute; background-color: #222; width: 250px; height: 125px; top: 75px; margin-left: 75px; margin-right: auto; border-radius: 250px 250px 0px 0px; } .gauge-c { z-index: 2; position: absolute; background-color: #5664F9; width: 400px; height: 200px; top: 200px; margin-left: auto; margin-right: auto; border-radius: 0px 0px 200px 200px; transform-origin: center top; transition: all 1.3s ease-in-out; } .container:hover .gauge-c { transform:rotate(.5turn); } .container:hover .gauge-data { color: rgba(255,255,255,1); } .gauge-data { z-index: 4; color: rgba(255,255,255,.2); font-size: 1.5em; line-height: 25px; position: absolute; width: 400px; height: 200px; top: 90px; margin-left: auto; margin-right: auto; transition: all 1s ease-out; }
i have made a a more adaptable code 🙂 try it 😉
.gauge {
width: 56px;
height: 28px;
position: relative;
text-align: center;
margin: auto;
overflow: hidden;
}
.gauge-back {
/* z-index: 1; */
/* position: absolute; */
background-color: rgba(240,240,240,.8);
width: 100%;
height: 100%;
/* top: 0%; */
border-radius: 250px 250px 0px 0px;
}
.gauge-b {
z-index: 3;
position: absolute;
background-color: red;
width: 75%;
height: 75%;
/* top: 50%; */
bottom: 0;
margin-left: 50%;
transform: translateX(-50%);
margin-right: auto;
border-radius: 250px 250px 0px 0px;
}
.gauge-level {
z-index: 2;
position: absolute;
background-color: #00E676;
width: 100%;
height: 100%;
/* top: 200px; */
margin-left: auto;
margin-right: auto;
border-radius: 0px 0px 200px 200px;
transform-origin: center top;
transform: rotate(180deg);
}
.gauge-data {
z-index: 4;
color: #FFF;
font-size: 1.5em;
line-height: 25px;
position: absolute;
width: 100%;
height: 100%;
top: 50%;
margin-left: auto;
margin-right: auto;
}
///////////////////
0%
Hello,
I want to display the gauge on à kiosk (no user interaction).
The value will be set by server here 20%
Thanks