speedometer progress gauge - Free Download Speedometer Style Progress Gauge With jQuery And CSS3

Free Download Speedometer Style Progress Gauge With jQuery And CSS3

Posted on

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.

speedometer progress gauge - Free Download Speedometer Style Progress Gauge With jQuery And CSS3
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%