HFO TANK 3D FINAL

hfo-tank-3d-final.markdown

HFO TANK 3D FINAL

Inspired by this pen : http://codepen.io/nsmirnova/pen/KpgpNM I tryied to create different progress bar with SVG.

A Pen by Albert KP on CodePen.

License.

hfo-tank-3d.markdown

HFO TANK 3D

Inspired by this pen : http://codepen.io/nsmirnova/pen/KpgpNM I tryied to create different progress bar with SVG.

A Pen by Albert KP on CodePen.

License.

index.html

<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>

script.js

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);

scripts

<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>

style.scss

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;
  }
}

svg-progressbar.markdown

SVG ProgressBar

Inspired by this pen : http://codepen.io/nsmirnova/pen/KpgpNM I tryied to create different progress bar with SVG.

A Pen by Albert KP on CodePen.

License.