CODEWITHSUNDEEP
javascriptangularjs
user15974221
user15974221

Reputation:

How can I add "Loading" text when i click on a button in angular.js?

Here is the progress bar(Loading) as I know,

<svg class="center-block progress-bar-round" width="200" height="200">
    <circle cx="100" cy="100" r="90" fill="none" stroke="#F8F8FF" stroke-width="8"/>
    <circle cx="100" cy="100" r="90" fill="none" id="loader" class=""
            stroke="#209e91" stroke-width="8" stroke-dasharray="0,20000"
            transform="rotate(-90,100,100)" stroke-linecap="round"/>
    <text text-anchor="middle" class="loading" x="100" y="90">Loading...</text>
    <text class="percentage" text-anchor="middle" x="100" y="130">{{progress}}%</text>
</svg>

In a page, lets say there is "Continue" button, but i dont know how to connect this Loading text with that button, How could I do it?

Upvotes: 0

Views: 239

Answers (1)

Kinglish
Kinglish

Reputation: 23664

You can use some kind of boolean in your controller like

$scope.loading = false

Then in your html your button, and your svg, which is hidden until $scope.loading is true with ng-if

<button ng-click="continue()" ng-if="!loading">Continue</button>

<svg ng-if='loading' class="center-block progress-bar-round" width="200" height="200">
    <circle cx="100" cy="100" r="90" fill="none" stroke="#F8F8FF" stroke-width="8"/>
    <circle cx="100" cy="100" r="90" fill="none" id="loader" class=""
            stroke="#209e91" stroke-width="8" stroke-dasharray="0,20000"
            transform="rotate(-90,100,100)" stroke-linecap="round"/>
    <text text-anchor="middle" class="loading" x="100" y="90">Loading...</text>
    <text class="percentage" text-anchor="middle" x="100" y="130">{{progress}}%</text>
</svg>

Then finally in your controller

$scope.continue = function() {
  $scope.loading = true;
  // do the loading stuff, then when done
  // ...
  $scope.loading = false;
}

Upvotes: 2

Related Questions