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 — Jakes Van Niekerk
– Jakes Van Niekerk, Commented Jul 9, 2021 at 5:30
Thank you Mr, may you look at my other question too please? stackoverflow.com/questions/68307907/… — user15974221
– user15974221, Commented Jul 9, 2021 at 5:31

Kinglish · Accepted Answer · 2021-07-09 08:17:20Z

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 9, 2021 at 8:17

answered Jul 9, 2021 at 5:29

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user15974221 Over a year ago

Thank you for replying Mr, ill try to do this. Could you look at my other question too if u have time? stackoverflow.com/questions/68307907/…

user15974221 Over a year ago

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,

Kinglish Over a year ago

you say another page - is it actually another page or the same page with different content? Are you loading a different view file?

user15974221 Over a year ago

There are forms. When i click on a continue button, it shows another form in the same page. i hope i am clear.

Kinglish Over a year ago

I updated the answer - it is rudimentary but it will work.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related