Ways to make a button blink using AngularJS

Currently working on an AngularJS SPA application where a button is present in the front-end HTML page. When this button is clicked, it triggers an operation which takes some time to complete. I want to inform the user that the operation is still in progress. Considering options like making the button or text on the button blink, or exploring other effective approaches commonly used for similar scenarios. I am willing to consider suggestions such as using spinners on the button or any other method that clearly communicates the current state to the user.

javascriptangularjshtmlcss

Answer №1

To accomplish this task, you can utilize a Boolean variable.

For example:

$scope.inProgress = false;
$scope.someAction = someAction;

function someAction(){
   $scope.inProgress = true;

   //perform action here
   //upon completion
   $scope.inProgress = false;
}

Remember to set the variable back to false after the operation is finished.

In your HTML code:

    <button>
      <span ng-if="!inProgress">
        Submit
      </span>
      <span ng-if="inProgress">
        In progress
        <i class="glyphicon glyphicon-refresh glyphicon-spin"></i>
      </span> 
    </button>

To add some styling:

button{
  padding:5px;
}
button span{
  margin-left: 10px;
}
.glyphicon-spin {
    -webkit-animation: spin 1000ms infinite linear;
    animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

This will produce a spinning effect within the button. Feel free to customize it to suit your needs.

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

The creation of fsm.WriteStream is invalid as it is not a recognized constructor

Can you help me with this issue? I am attempting to install @ng-idle/keepalive using the command npm install --save @ng-idle/core, but I encountered the following error: npm ERR! fsm.WriteStream is not a constructor npm ERR! Log files were not written due ...

node.jsangularangularjsnpmng-idle

Ways to ensure the bootstrap table header width aligns perfectly with the body width

I am having an issue with my bootstrap table where the header width is smaller than the body width because I set the table width to auto. How can I align the header and body widths? Here is a link to a plunker showcasing the problem. https://plnkr.co/edit ...

javascripthtmlcsstwitter-bootstrapangular-ui-bootstrap

Utilize React Material UI to dynamically update state with Slider interactions

Currently, I am in the process of developing a multi-step form (survey) using React.js and the Material-UI components library. However, I have encountered an issue with the slider component at one of the steps – it does not seem to update the state as ex ...

javascriptreactjsmaterial-ui

Discover the CSS auto height value using JavaScript

Is there a way to utilize JavaScript in determining the value set for auto height in CSS? My development stack includes Grails and jQuery. For instance, consider the following CSS: .tool-preview { height: auto; } ...

javascriptcss

What is the best way to access a local variable within a POST method in Node.js?

Below are some of the modules that I have utilized: const mysql = require('mysql'); const express = require('express'); const session = require('express-session'); const path = require('path'); const bodyParser = req ...

htmlnode.jsexpressejs

jQuery can be used to obtain the label for a checkbox with a particular value

Currently, I am facing an issue with retrieving the label for a checkbox using jQuery. Let me provide you with the relevant HTML code: <div class="checkbox"> <label><input type="checkbox" name="cb_type[]" value="sold" >Sold</label ...

javascriptjquery

Generating an Array of objects through the use of the each method

Currently, I am in the process of developing a web scraper using node.js along with puppeteer and cheerio. Although I can successfully display the desired strings in the console.log, I am facing challenges in determining if this task is achievable. $(&apo ...

javascriptnode.jsarraysjsonjavascript-objects

What is the best way to create a scrollable tbody in an HTML table using React?

In my current project, I am using React, Node, Express, and Postgres to fetch data from a database. The issue I'm facing involves creating a scrollable table within a div that spans the entire screen width. Initially, I had to apply display: block to ...

javascripthtmlcssreactjsbootstrap-4

Using single quotation marks within a string can cause issues in javascript

I am curious about how to handle single quote marks and other symbols within user-generated text without causing issues with the JavaScript code. Currently, if a user enters a title like "I wouldn't", it breaks the JavaScript functionality. <a cl ...

javascriptphp

Adjust the stroke and fill color of an SVG upon hovering over it

I have a unique SVG image with an intricate stroke around it that matches the color of a filled icon. Positioned on a black background within the image, you can view my example here: https://jsfiddle.net/o48629qs/ The challenge I am facing involves changi ...

htmlcsssvg

What is the best way to extract individual objects from several arrays and consolidate them into a single array?

Currently, I have a collection of objects stored in a variable called listOfObjects. They are not separated by commas because I utilized the Object.entries method to extract these values from another array. console.log(listOfObjects) outputs { q: 'L ...

javascriptarraystype-conversionnested-object

I encountered difficulty accessing a different domain from the node server

I am currently in the process of integrating the PayUmoney payment gateway into my MEAN stack application. I have successfully retrieved all mandatory fields from the Angular controller to Node and even generated the Hash key. However, when attempting to r ...

angularjsnode.jspayment-gatewaymean-stackpayumoney

Observing the closing of a modal window from a different controller in AngularJS

Within my main controller, I have a function called $scope.showDialog: $scope.showDialog = function(ev) { $mdDialog.show({ controller: 'DialogController', templateUrl: 'partials/dialog.tmpl.ejs', targetEvent: ev ...

javascriptangularjs

html Comparison of Documents

My goal is to compare HTML documents to see if they have the same tags in the same arrangement, regardless of different inner text and attribute values. I am only interested in comparing the general tag structure, such as: <html> <head> </h ...

c#htmlhtml-parsingdom

Tips for creating a subclass using jQuery

I am familiar with selecting the class "myClass" using $(".myClass"), but my question is how do I select the child link within an element with the class "myClass" using jQuery? Here is a sample of the code: <a href=#>Home</a> <div class ...

jqueryhtmlcss

Is the JQuery ajax xhr fully completed before it begins?

Having a long script that can take a few minutes to execute, I decided to create a progress bar to display the current state. However, I encountered a problem where xhr evt.loaded/evt.total (30/30) returns 1 (100%) before the long script starts executing. ...

javascriptphpjqueryajaxxmlhttprequest

Some design elements are present in the interface. The functionality of the data tables is working properly, however, upon reloading the page, the table header shrinks. Interestingly

[![enter image description here][1]][1] This is the JavaScript code along with my footer and header references. The issue I am facing is with the design - initially, it shows a buggy design but when I click on the header, it displays the correct design. & ...

javascriptc#ajaxasp.net-coredatatables

ViewCheck and every

Can IsInView be set to wait for all elements with the same class, instead of calling them individually? For instance, if there are three sections, can they be called like this: $(".section").on('inview', function(event, isInView) { i ...

javascriptjqueryviewport

Is the input in the array? How to find out?

I am currently facing an issue with a script that I have created to count array elements matching a user input. Strangely, all if statements in the script seem to be returning false. I have verified that both the array element and the input value are stri ...

javascript

Is there a method in PHP to conceal HTML code?

Although I understand that obfuscated html/js code may seem unnecessary to some (I've read similar questions on SO), I still want to add an extra layer of protection against potential copycats of my site... My website is php-based and generates html ...

phphtmlobfuscation