Skip to content

Instantly share code, notes, and snippets.

@glektarssza

glektarssza/bullshit-o-meter.html

Created November 12, 2024 03:09
Show Gist options
  • Save glektarssza/635951dcc64147a252a49d3475539b01 to your computer and use it in GitHub Desktop.
Save glektarssza/635951dcc64147a252a49d3475539b01 to your computer and use it in GitHub Desktop.
Download ZIP
A little speedometer-style gauge built in CSS and HTML.
Raw
bullshit-o-meter.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Bullshit-O-Meter</title>
<style>
.gauge {
width: 400px;
height: 200px;
background-color: #e7e7e7;
border-radius: 200px 200px 0 0 !important;
position: relative;
overflow: hidden;
}
.gauge-outer {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
background: conic-gradient(from -90deg at bottom,
#1eaa59 0% 12.5%,
#f1c40f 12.5% 25%,
#e67e22 25% 37.5%,
#e84c3d 37.5% 50%);
}
.gauge-needle {
display: block;
width: 180px;
height: 7px;
background: #15222e;
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: -2px;
left: 20px;
transform-origin: 100% 4px;
transform: rotate(0deg);
box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.38);
z-index: 5;
animation: 2s 1s ease-in-out move-to-red-zone, 0.5s 3s ease-in-out infinite alternate-reverse oscillate-in-red-zone;
animation-fill-mode: forwards;
}
.gauge-inner {
color: white;
width: 60%;
height: 60%;
background: #15222E;
border-radius: 200px 200px 0 0 !important;
position: absolute;
right: 21%;
bottom: 0;
z-index: 10;
}
.gauge-inner {
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
}
.gauge-inner .label {
margin-bottom: 1rem;
width: 100%;
text-align: center;
border: 0 !important;
text-transform: uppercase;
font-weight: bold;
font-size: 1.4em;
}
@keyframes move-to-red-zone {
0% {
transform: rotate(0);
}
100% {
transform: rotate(170deg);
}
}
@keyframes oscillate-in-red-zone {
0% {
transform: rotate(145deg);
}
100% {
transform: rotate(170deg);
}
}
</style>
<script></script>
</head>
<body>
<div class="gauge">
<div class="gauge-outer"></div>
<div class="gauge-needle gauge-needle-initialize"></div>
<div class="gauge-inner">
<p class="label">
Bullshit
Detected
</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment