Progress bar in angulajs

Question

Progress bar in angulajs

Navigation

#1 by (3 votes)

0

I need a% w / o% to be the image of a chalice being filled with progress-bar . Something like this: link .

Can anybody help you?

I still do not have the official image, but it would look something like this: When you open a page, the liquid of the chalice ( AngularJs ) would rise until the whole chalice ( imagem 01 )

javascript angularjs html5 css3 progress-bar

asked by anonymous 30.01.2017 / 18:56

1 answer

Page refresh with limit [closed] How do I "update" a function?

score 3 · Accepted Answer

This plugin does not have angled , you have to use < jquery "or no (I think it's simpler to use with jQuery) jQuery ).

Minimum example

var app = angular.module('app', []);
app.controller('ctrl', ['$scope',
  function($scope) {    
    $scope.load = function() {
      $("#myImage").load(function() {
        $('#myImage').loadgo({
          'opacity': 0.5,
          'animated': true/*
          'image': 'https://i.stack.imgur.com/7uk8G.png'*/,
          'direction': 'bt'          
        });
      }).each(function() {
        if (this.complete) $(this).load();
      });
    };
    $scope.go = function() {
      var _time = window.setInterval(function() {
        if ($('#myImage').loadgo('getprogress') == 100) {
          $('#myImage').loadgo('setprogress', 0);
          $("#btnExecutar").text('Executar');
          $("#btnExecutar").prop('disabled', false);
          window.clearInterval(_time);
        } else {
          var i = ($('#myImage').loadgo('getprogress') + 4);
          $('#myImage').loadgo('setprogress', i);
          $("#btnExecutar").text('Executando ...');
          $("#btnExecutar").prop('disabled', true);
        }
      }, 150);
    };
    $scope.load();
    //$scope.go(); // remover para funciona no inicio do carregamento
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/LoadGo/2.1/loadgo.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divid="app" ng-app="app" ng-controller="ctrl" style="width:100%">  
 <p style="margin-botton:150px; float:left">
  <img id="myImage" style="width:300px" src="https://i.stack.imgur.com/0sLfb.png"border="0" />
  </p>
  <button id="btnExecutar" ng-click="go()">Executar</button>
</div>

In this example, a button was used, but at the end of script has a comment it is only uncomment ( //$scope.go(); ) that this will work when loading the page. The images also look different to me

Reference LoadGo