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

Question

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?

Maybe this would help. Stumbled upon it, it relates to dynamically changing button text. [link](https://stackoverflow.com/questions/39633069/change-button-text-dynamically-in-angularjs) — Jakes Van Niekerk, Jul 09 '21 at 05:30
Thank you Mr, may you look at my other question too please? https://stackoverflow.com/questions/68307907/how-can-i-find-the-page-where-ill-do-the-changes-in-angular-js?noredirect=1#comment120724367_68307907 — , Jul 09 '21 at 05:31

Kinglish · Accepted Answer · 2021-07-09T08:17:20.077

2

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

edited Jul 09 '21 at 08:17

answered Jul 09 '21 at 05:29

Kinglish

23,358
3
22
43

Thank you for replying Mr, ill try to do this. Could you look at my other question too if u have time? https://stackoverflow.com/questions/68307907/how-can-i-find-the-page-where-ill-do-the-changes-in-angular-js?noredirect=1#comment120724367_68307907 – Jul 09 '21 at 05:32
Btw i meant that I want to show the loading part when i click on "continue" button. When it opens another page it will stop, loading part will be seen till other page opens. Button's text wont be changed. Sorry for my explanation, – Jul 09 '21 at 06:02
1

you say another page - is it actually another page or the same page with different content? Are you loading a different view file? – Kinglish Jul 09 '21 at 06:26
There are forms. When i click on a continue button, it shows another form in the same page. i hope i am clear. – Jul 09 '21 at 07:41
1

I updated the answer - it is rudimentary but it will work. – Kinglish Jul 09 '21 at 08:17

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

1 Answers1