Progress bar in angulajs

Question

I need a progress-bar which is the image of a chalice being filled with AngularJs. Something like this: http://franverona.com/loadgo/.

Can someone give me an example?

I don’t have the official image yet, but it would look something like this: Opening a page, the liquid of the chalice (imagem 01) would rise to complete the whole chalice (imagem 02)

---

Answer 1

This plugin does not have to angular, have to use jquery or nay (I find it simpler with jQuery).

Minimal 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>
<script src="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>
<div id="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 the script has a comment just to uncork (//$scope.go();) that this will work when loading the page. The images also look different n

Reference: Loadgo