Is there a way to display "Loading" text upon clicking a button using angular.js?

Check out this unique progress bar code snippet:

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

I have a page with a "Start" button, but I'm not sure how to link the loading animation to it. Any suggestions?

javascriptangularjs

Answer №1

To incorporate a boolean in your controller, you can utilize the following:

$scope.loading = false

Subsequently, in your HTML document, you can have a button and an SVG element—both hidden until $scope.loading is true by utilizing 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>

Lastly, within your controller function:

$scope.continue = function() {
  $scope.loading = true;
  // execute loading actions, then once finished
  // ...
  $scope.loading = false;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Postponing the activation of toggleClass in jQuery until the completion of a slide animation

Having some trouble with the jQuery delay() function. I'm using it to pause a toggleClass action until after a slideUp animation on one of my divs, but it doesn't seem to be working as expected. I want a bar with rounded corners that expands whe ...

javascriptjqueryhtmlcssanimation

Using a ng-repeat directive with a custom marker from ng-map causes $digest loop errors, yet the functionality remains intact

Presently, I am utilizing this library to incorporate custom markers on a map. I successfully implemented it without any errors on Plunker, but encountered issues when trying to replicate the same on my own website (despite using identical script src link ...

angularjsgoogle-maps-api-3angular-google-mapsangularjs-digestng-map

The Jquery calculation feature sometimes mistakenly adds an incorrect value before calculating the correct value

Working on a calculator that accurately computes the field price and displays it, but facing an issue where the correct answer seems to merge with another value (likely from data-price as they match). Snippet of the code: var updateTotal = function() { ...

javascriptjquery

Creating animations for canvas using the .stroke() method, all done without the need for additional

I've noticed this question has been asked many times (I did my research), but I'm struggling to figure out how to animate the .stroke() command on a canvas. I came across some examples, however, they all seem to rely on external libraries that ar ...

javascriptjqueryhtmlcanvas

Arrange the data in the table to ensure that it is organized neatly into the appropriate columns

I am currently working on a project that involves creating a table to display user answers for purchased tickets under the corresponding questions. If a question has not been answered, I want to show a dash symbol instead. However, I am encountering an is ...

javascriptarraysvue.jshtml-table

Utilizing a parent directive's function within a child directive

Hey there! I'm currently working on creating a pane system where elem.bind('change,...) on a child directive can change the "selected" parent directive. You can check out my progress here: http://plnkr.co/edit/gc35fuUiJVUhHF4QMAwv?p=preview (fun ...

angularjs

Troubleshoot: Why is fs.createReadStream in node.js only reading the last line of

Hello, I am currently facing some frustrating issues while trying to stream the contents of my CSV file. Below is the code snippet I am using, and my struggles are hidden in the comments. var fileReadStream = fs.createReadStream(inFile); // I&a ...

javascriptnode.jsfilestreamfs

Issue with reading initial state value in React application

I'm currently working on an application centered around payment recording functionality. Within my app, there is a state structure that looks something like this: const [state, setstate] = useState({ amountPaid: Number(bill.total), // the 'b ...

javascriptreactjsmaterial-ui

AngularJS bootstrap progress bar experiences incorrect updates after including ngAnimate dependency

On my webpage, I have integrated an AngularJS bootstrap progress bar, but I am facing an issue when adding ngAnimate as a dependency to my module. You can view the problem in action by checking out this plunker. Each time there is an update animation, it ...

angularjs

What is the method for invoking a function with arguments within an HTML `<p>` element?

I am looking to display like and dislike percentages on cards. <v-card v-if="software[2] == searched || searched == ''" class="software-card" > <h3>{{ software[2] }}</h3> ...

javascripthtmlvue.js

Challenges encountered when utilizing the PUT method with Node.js (express), Angular, and MongoDB

I'm facing a challenge in updating my data to MongoDB using Monk with MongoDB, Node, Express, and Angular. While POST and DELETE are working fine, I'm encountering difficulties with PUT. The error message I receive is: PUT http://localhost:3000 ...

node.jsangularjsmongodbexpressmonk

Is it necessary for me to be concerned with clearing out sizable objects in Node.js, or should I trust the garbage collector to handle

Recently, I encountered a memory issue with my node.js API while hosting it on Heroku's free version with only 512MB RAM. As the traffic increased over the weekend, I started receiving memory errors from Heroku due to exceeding limits. Despite searchi ...

javascriptnode.jsgarbage-collectionv8

Exploring Cross-Domain Scripting with Rest-Angular and Rails

I'm currently developing an application using Rest-Angular and Rails. Angular is operating on localhost:9000 while Rails is on port 3000. Unfortunately, I've encountered some cross-domain issues that are preventing me from sending POST requests. ...

angularjscorsrestangular

What is the best way to display all the properties of an npm package in an aesthetically pleasing format?

My curiosity leads me to explore the various methods and properties of components like GoogleMapReact. I attempted the following code: import GoogleMapReact from 'google-map-react' console.log(GoogleMapReact); However, the output is a long, mess ...

javascriptnode.jsnpmconsole.log

The concept of CSS sprites and managing background positions

I have been working on integrating a star-rating widget that requires the use of a sprite file. The sprite file I am using looks like this: https://i.stack.imgur.com/ZSMMj.png This is how my HTML is structured: HTML <span id="star-ratings" class="c ...

javascripthtmlcss

Express fails to provide a correct response

I have been working on implementing MongoDB to gather data for our analytics page. However, despite seeing the data in the terminal through console log, when I make a request, Express returns an empty array as the response. Here is my endpoint: import Ana ...

javascriptnode.jsmongodbexpress

Tips for positioning a div element within the body of a webpage to maintain a predetermined height and width

Currently, I am developing a single-page application using AngularJS. I have specific routes in mind where I want to introduce new HTML templates. To accomplish this, I have created a container labeled with the ID #main positioned between two navbars (he ...

javascriptjqueryhtmlcssangularjs

php send back a JSON containing an error message using AngularJS

I am a beginner with PHP and AngularJS, I have written some PHP code that can return JSON data in the following format: {id:10, sessionName:99, computer:99, quality:LAN(very fast), networkAuthentication:Disable,…} {id:13, sessionName:55, computer:55, q ...

javascriptphpjsonangularjs

What is the best way to tailor specific text in d3.js?

I need assistance with customizing the appearance of an asterisk added to the end of a template literal in d3js. I want to be able to independently adjust the size and color of the asterisk regardless of the variable it's attached to. Below is the cod ...

javascripthtmlvue.jsd3.js

I'm curious if there is a method in Vue.js that allows for creating a separator while utilizing v-for, much like the way `Array.join()` or FreeMarker's `<#sep>` functions operate

My goal is to create a list of <span> elements separated by commas using vue.js and v-for. Is there an easy way to achieve this in vue.js? In JavaScript, I would typically use users.join(", "). In FreeMarker templates, you can do some very interes ...

javascriptvue.jsfreemarkerv-for