This time I will share jQuery Plugin and tutorial about Speedometer Style Progress Gauge With jQuery And CSS3, hope it will help you in programming stack.
| File Size: | 6.17 KB |
|---|---|
| Views Total: | 1846 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A speedometer style circular progress gauge to represent the current progress in percentage. Written in JavaScript (jQuery) and CSS/CSS3.
See It In Action:
How to use it:
1. Create the HTML for the speedometer & range slider.
1 |
<div class="progress"> |
2 |
<div class="precent">100 km/h</div> |
3 |
<div class="circle"></div> |
4 |
<div class="range"> |
5 |
<input type="range" min="0" max="100" value="47" id="range"> |
6 |
<div class="filled"></div> |
7 |
</div> |
8 |
</div> |
2. The necessary CSS & CSS3 rules for the speedometer.
001 |
.progress { |
002 |
width: 200px; |
003 |
height: 200px; |
004 |
position: absolute; |
005 |
top: 50%; |
006 |
left: 50%; |
007 |
transform: translate(-50%, -50%) rotateY(180deg); |
008 |
} |
009 |
.progress:before { |
010 |
content: ""; |
011 |
position: absolute; |
012 |
width: 185px; |
013 |
height: 185px; |
014 |
background: #232323; |
015 |
border-radius: 100%; |
016 |
top: 50%; |
017 |
left: 50%; |
018 |
transform: translate(-50%, -50%); |
019 |
z-index: 99; |
020 |
} |
021 |
.progress:after { |
022 |
content: ""; |
023 |
position: absolute; |
024 |
width: 8px; |
025 |
height: 100px; |
026 |
background: linear-gradient(180deg, #d63031, #232323); |
027 |
border-radius: 10px; |
028 |
box-shadow: 0 -19px 9px -3px #d63031; |
029 |
top: 0; |
030 |
right: 50%; |
031 |
margin-right: -4px; |
032 |
z-index: 999; |
033 |
transform: rotate(90deg); |
034 |
transform-origin: bottom; |
035 |
animation-name: meter; |
036 |
animation-duration: 5s; |
037 |
animation-iteration-count: infinite; |
038 |
animation-timing-function: cubic-bezier(0, 0.1, 0.9, 0.81); |
039 |
animation-play-state: paused; |
040 |
animation-direction: reverse; |
041 |
animation-delay: 5s; |
042 |
} |
043 |
.progress .precent { |
044 |
position: absolute; |
045 |
top: 29px; |
046 |
left: 50%; |
047 |
z-index: 99; |
048 |
transform: translate(-50%, 0) rotateY(180deg); |
049 |
font-size: 19px; |
050 |
color: white; |
051 |
width: 47px; |
052 |
text-align: center; |
053 |
line-height: 1.5; |
054 |
} |
055 |
.progress .precent:after { |
056 |
content: ""; |
057 |
position: absolute; |
058 |
width: 35px; |
059 |
height: 35px; |
060 |
background: #323232; |
061 |
border-radius: 100%; |
062 |
top: 85px; |
063 |
right: -35px; |
064 |
} |
065 |
.progress .precent:before { |
066 |
content: ""; |
067 |
position: absolute; |
068 |
width: 35px; |
069 |
height: 35px; |
070 |
background: #323232; |
071 |
border-radius: 100%; |
072 |
top: 85px; |
073 |
left: -35px; |
074 |
} |
075 |
.progress .circle { |
076 |
width: 200px; |
077 |
height: 200px; |
078 |
background: white; |
079 |
background: conic-gradient( |
080 |
from 91deg, |
081 |
#d63031 0%, |
082 |
#ffffff 20%, |
083 |
transparent 100% |
