Triangle progress bar using SVG and Angular JS

Question

I need to do my custom triangle progress bar using SVG and Angular JS. But it seems to be hard to control the green color bar. Can anyone help me?

Here my codes. You may adjust the value in the textbox .

 var app = angular.module('ProgressBar', []); app.controller('ProgressBarCtrl', function($scope) { $scope.A=365; $scope.B=275; $scope.C=33; $scope.D=276; $scope.E=366; $scope.F=157; }); 

 .bar-content{fill:#D1D3D4;} .bar-frame{fill:#69BD45;} 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="ProgressBar" ng-controller="ProgressBarCtrl"> <input type="number" ng-model="A" /> <input type="number" ng-model="B" /> <input type="number" ng-model="C" /> <input type="number" ng-model="D" /> <input type="number" ng-model="E" /> <input type="number" ng-model="F" /> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve"> <polygon id="XMLID_1_" class="bar-content" points="535,275 36,275 535,97 "/> <polygon id="XMLID_2_" class="bar-frame" points="{{A}},{{B}} {{C}},{{D}} {{E}},{{F}} "/> </svg> </div> 

Answer 1

Haven't touched Angular before, so I can't help you there. I can however present an approach suitable for use with either SVG or Canvas. (The canvas implementation is faster, I imagine since it's GPU accelerated)

Since your initial image has an aspect ratio of 2.85 : 1, I chose to use a height of 100px and a width of 285px - I've used the same dimensions for each.

 function byId(id){return document.getElementById(id)} function allByClass(clss){return document.getElementsByClassName(clss)} function allByTag(tag,parent){return (parent = undefined ? document : parent).getElementsByTagName(tag)} window.addEventListener('load', onDocLoaded, false); function onDocLoaded(evt) { byId('slider').style.width = byId('volume').width + 'px'; setVolume(50); byId('slider').addEventListener('input', onSliderChanged, false); byId('slider').addEventListener('input', onSlider2Changed, false); } function onSliderChanged(evt) { var value = this.value; setVolume(value); } function onSlider2Changed(evt) { var value = this.value; setVolumeSVG(value); } function setVolumeSVG(percent) { var svg = byId('mSvg'); var barWidth = (percent/100) * svg.width.baseVal.value; var barHeight = (percent/100) * svg.height.baseVal.value; var msg = "0,"+svg.height.baseVal.value + " " + barWidth + "," + (svg.height.baseVal.value-barHeight) + " " + barWidth + "," + svg.height.baseVal.value; allByClass('barSlider')[0].setAttribute('points', msg); } // // // (2) // // // // // (1) (3) function setVolume(percent) { var can = byId('volume'); var ctx = can.getContext('2d'); ctx.fillStyle = "rgba(0,0,0,0)"; ctx.fillRect(0,0,can.width,can.height); ctx.fillStyle = "#d1d3d4"; ctx.moveTo(0,can.height); ctx.beginPath(); ctx.lineTo(can.width, 0); ctx.lineTo(can.width,can.height); ctx.lineTo(0,can.height); ctx.fill(); ctx.beginPath(); ctx.fillStyle = "#69bd45"; ctx.moveTo(0,can.height); ctx.lineTo( (percent/100)*can.width, can.height - ( (percent/100)*can.height) ); ctx.lineTo( (percent/100)*can.width, can.height ); ctx.lineTo(0,can.height); ctx.fill() } 

  <canvas width=285 height=100 id='volume'></canvas><br> <input type='range' min='0' max='100' step='1' value=50 id='slider'/> <hr/> <svg id='mSvg' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 100" width=285 height=100> <g> <polygon class="barFrame" points="0,100 285,100 285,0"></polygon> <polygon class='barSlider' points="0,100 143,100 143,50"></polygon> </g> <style> .barFrame{ fill: #d1d3d4; } .barSlider{ fill: #69bd45; } </style> </svg>