Inspired by this pen : http://codepen.io/nsmirnova/pen/KpgpNM I tryied to create different progress bar with SVG.
Last active
April 4, 2019 06:03
-
-
Save albertThinkpalm/9274087fa72f4659879fcd26eaf96e8f to your computer and use it in GitHub Desktop.
HFO TANK 3D FINAL
Inspired by this pen : http://codepen.io/nsmirnova/pen/KpgpNM I tryied to create different progress bar with SVG.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="playground"> | |
| <section class="progress-wrapper"> | |
| <h2>HFO SETTING TK</h2> | |
| <svg id="cylinder-units" width="15%" height="80%"> | |
| <g fill="black" class="cylinder-unit-texts"> | |
| <text font-size="80%" x="0" y="22%" >100</text> | |
| <text font-size="80%" x="0" y="37%" >80</text> | |
| <text font-size="80%" x="0" y="52%" >40</text> | |
| <text font-size="80%" x="0" y="67%" >20</text> | |
| <text font-size="80%" x="0" y="82%" >0</text> | |
| </g> | |
| <g class="cylinder-axis-ticks"> | |
| <line x1="100%" y1="80%" x2="100%" y2="20%" style="stroke:black;stroke-width:1" /> | |
| <line x1="80%" y1="20%" x2="100%" y2="20%" style="stroke:black;stroke-width:1" /> | |
| <line x1="80%" y1="35%" x2="100%" y2="35%" style="stroke:black;stroke-width:1" /> | |
| <line x1="80%" y1="50%" x2="100%" y2="50%" style="stroke:black;stroke-width:1" /> | |
| <line x1="80%" y1="65%" x2="100%" y2="65%" style="stroke:black;stroke-width:1" /> | |
| <line x1="80%" y1="80%" x2="100%" y2="80%" style="stroke:black;stroke-width:1" /> | |
| </g> | |
| </svg> | |
| <svg style="align:left !important;" id="cylinder-progress" width="70%" height="80%"> | |
| <g class="progress-container"> | |
| <rect x="0" y="20%" width="100%" height="60%"></rect> | |
| <ellipse cx="50%" cy="20%" rx="50%" ry="15" class="top"></ellipse> | |
| <ellipse cx="50%" cy="80%" rx="50%" ry="15" class="bottom"></ellipse> | |
| </g> | |
| <g class="progress-content"> | |
| <rect x="0" y="70%" width="100%" height="10%"></rect> | |
| <ellipse cx="50%" cy="80%" rx="50%" ry="15" class="bottom"></ellipse> | |
| <ellipse cx="50%" cy="70%" rx="50%" ry="15" class="top"></ellipse> | |
| </g> | |
| </svg> | |
| </section> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var progressValue = 0; | |
| var orderAsc = true; | |
| var idLine = 'line-progress'; | |
| var idCylinder = 'cylinder-progress'; | |
| var cylinderPrgrs = $('#'+idCylinder); | |
| var linePrgrs = $('#'+idLine); | |
| //Update the cylinder progress bar | |
| var updateProgressCylinder = function(value){ | |
| var s = Snap('#'+idCylinder); | |
| var cylContent = cylinderPrgrs.find('.progress-content'); | |
| var rect = s.select('.progress-content>rect'); | |
| var topEllipse = s.select('.progress-content>.top'); | |
| //0% = {y:90, height:0} / 100% = {y:20, height:80} | |
| rect.attr({height: (60-(progressValue*.6))+ '%', y: ((progressValue*.6)+20) + '%' }); | |
| // 20 = 100% -- 100 = 0% | |
| topEllipse.attr({cy: ((-progressValue*-.6)+20)+'%'}); | |
| s.select('.percentage').attr({ text: (100-(progressValue)+"%")}); | |
| } | |
| //Update the line progress bar | |
| var updateProgressLine = function(value){ | |
| linePrgrs.find('.progress-content>line').attr("stroke-dashoffset", progressValue+"%"); | |
| linePrgrs.find('text').html((100-progressValue)+"%"); | |
| } | |
| //Update the content fill value | |
| var updateProgressValue = function(){ | |
| if(progressValue>=100)orderAsc = false; | |
| else if(progressValue<=0)orderAsc = true; | |
| if(orderAsc)progressValue++; | |
| else progressValue--; | |
| updateProgressCylinder(); | |
| } | |
| //Update every n milli-seconds | |
| window.setInterval(function(){ | |
| updateProgressValue(); | |
| }, 100); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| background-color: #3f3437; | |
| font-family: helvetica; | |
| } | |
| .playground{ | |
| background-color: #4C3E41; | |
| border-radius: 6px; | |
| box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 2px 1px 0 rgba(0,0,0,.12); | |
| width: 80%; | |
| height: 300px; | |
| margin: 50px auto 0; | |
| display: flex; | |
| align-content: stretch; | |
| h2{ | |
| font-size: 1rem; | |
| color: white; | |
| margin-bottom: 40px; | |
| } | |
| .progress-wrapper{ | |
| margin: 0 auto; | |
| width: 60%; | |
| text-align: center; | |
| box-sizing: border-box; | |
| } | |
| .progress-container{ | |
| stroke: darken(#392F32,5%); | |
| stroke-width: 2px; | |
| fill: #392F32; | |
| .top{ | |
| z-index:2; | |
| } | |
| } | |
| .progress-content{ | |
| stroke: darken(#045425,5%); | |
| stroke-width: 2px; | |
| fill: #045425; | |
| .top{ | |
| z-index:1; | |
| } | |
| } | |
| .percentage{ | |
| fill: #F8F9F9; | |
| text-shadow: 1px 1px 1px black; | |
| } | |
| } |
Inspired by this pen : http://codepen.io/nsmirnova/pen/KpgpNM I tryied to create different progress bar with SVG.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment