Experiencing excessive CPU usage while utilizing a progress bar in Angular

Whenever I try to load a page with 2 progress bars, my CPU usage goes through the roof...

I decided to investigate and found that once I removed them, the site's speed improved significantly.

Here's a code snippet of one of the progress bars:

<progressbar class="progress-danger progress-striped active" value="procentValueEmail" name="domains_emails_search">

    <span class="badge badge-info-rev" n>
        {{procentValueEmail | number:1}}%
    </span>
</progressbar>

I'm utilizing Angularjs and 'procentValueEmail' remains a constant value.

Does anyone have insights on implementing a lag-free progress bar in Angular?

<script src="static/bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="static/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
javascripthtmlcssangularjstwitter-bootstrap

Answer №1

Within your HTML code, there is a specific class called 'active' that triggers unnecessary redraws by activating animations that are not even visible.

<progressbar class="progress-danger progress-striped" value="procentValueEmail" name = "domains_emails_search">

If you eliminate this class, you can avoid the performance problem altogether.

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

Converting a Class Component to a Functional Component in React: A Step-by-Step

I need to refactor this class-based component into a functional component class Main extends Components{ constructor(){ super() this.state = { posts:[ { id:"0", description:"abc", imageLink: ...

javascriptreactjs

Setting up Karma configuration to specifically exclude nested directories

When unit testing my Angular 2 application using Karma, I encountered an issue with my directory structure: └── src/ ├── index.js ├── index.js.text ├── index.test.js ├── README.txt ├── startuptest.js ...

javascripttestingkarma-runnerkarma-jasminekarma-coverage

Implementing dual backgrounds in CSS

I am trying to achieve a gradient background for li elements along with different image backgrounds for each individual li. Is there a way to accomplish this? List of items: <div id="right_navigation_container"> <ul> <li id ...

htmlcss

Unable to trigger AJAX POST with jQuery click handler

Important Note: Personally, I have a preference for utilizing jQuery over the shorthand $; although it involves more typing, I find it to be more readable. I am working on a simple form that allows users to input their first and last names as well as an e ...

javascriptjqueryajaxgrailshttp-post

Error: Unable to access the 'then' property of an undefined object when working with promises

I'm developing a website project that serves as a "Walmart" version of AirBnB. Here's the functionality of the button in question: When a user clicks on the "Make Reservation" button on a listing, they are prompted to select a start and end dat ...

javascriptexpresspromiseroutes

Organize a method's for-loop using JavaScript modules

I have a function that looks like this: function createModifiedList(people){ const modifiedList = [] for (let i = 0; i < people.length; i++){ modifiedList.push({ name: person.firstName + " " + person.lastName, ...

javascriptarraysvue.js

Switch out the ajax data in the input field

Is there a way to update the value in a text box using Ajax? Below is my code snippet: <input type="text" id="category_name" name="category_name" value="<?php if(isset($compName)) { echo ucfirst($compName); ...

javascriptphpjqueryajax

Exploring the power of CSS grid in React/Gatsby for creating dynamic layouts with varying numbers of columns in each

I need help creating a dynamic grid layout where the number of columns alternates between rows. For example, I want the first row to have one column, the second row to have two columns, and so on. Right now, my grid only has two columns per row. Does anyon ...

cssreactjscss-gridgatsby

How can I extract particular combinations from a PHP array?

I have a unique question that is quite specific and despite searching online, I couldn't find an answer. So, I decided to seek advice here. Imagine my webpage has three sliders: one for selecting color options for a square, another for a circle, and ...

javascriptphphtmlcss

Tallying the number of messages on Facebook

Greetings everyone! I have been utilizing the Facebook JS SDK to retrieve the number of messages sent. Below is the code snippet: <script> function statusChangeCallback(response) { console.log('statusChangeCallback'); console.log ...

javascriptfacebook

Experiencing a lack of information in express?

Whenever I attempt to send a POST request (using fetch) with the body containing the state of the application, I receive an empty object on the server side. What am I doing wrong here? I should be receiving the object with the properties name, username, an ...

javascriptnode.jsreactjsexpress

Extending image across several rows within a form

I'm facing an issue with trying to display an image across multiple rows in a horizontal Bootstrap form. The current layout looks like the image below. However, I want the profile picture on the left to span multiple rows of the input field. As it sta ...

htmlcsstwitter-bootstraptwitter-bootstrap-form

The functionality of scrolling ceases to work once the bootstrap modal is closed

I am utilizing Bootstrap v3.1.1 to showcase a modal popup on one of my web pages. The following code shows how I have implemented it. <!--Start show add student popup here --> <div class="modal fade" id="add-student" tabindex="-1" role="dialog" a ...

javascriptjquerycssajaxtwitter-bootstrap

How can I trigger an Iframe JavaScript function from within my webpage?

I have an Iframe within my page, with the following JavaScript code: function getTotSeats(){ window.WebAppInterface.showToast(document.forms[0].txtSeat_no.value); return document.forms[0].txtSeat_no.value; } I would like to call the above Jav ...

javascriptphpjquery

Uncertainty surrounding the extent of a button's scope within an Angular application

(click) event in one instance of a component is causing the function in another instance to be triggered unexpectedly. I am having trouble describing this issue. For reference, I have included a working example on stackblitz. When clicking on both buttons ...

htmlangularangularjsangular-directiveangular-components

Why is it not possible to pass references when utilizing a self-invoking function?

I have been experimenting with the IIFE pattern for some of my modules lately and encountered a problem that has stumped me. In my current project, I need to pass a few global variables for usage. One of these is the global googletag variable which initial ...

javascriptiife

The implementation of Typescript in Express does not rely on Middleware

I've encountered an issue with my Auth Middleware - it seems that the middleware isn't being called at all. Even when I intentionally throw an Error within the middleware function, nothing is printed out. For testing purposes, I only need to inv ...

javascripttypescriptexpressmiddleware

Storing data seamlessly within a controller using AngularJS on the same page

Can someone please assist me with saving data into an array and displaying it in a table within a form? <div ng-app="farmerapp" ng-controller="RegController"> @Html.TextBoxFor(x => x._Cetificate.CertificateName,new { data_ng_model = "_Ce ...

angularjsasp.net-mvc

Aligning content within a div block

I created a div block that houses a form structured like this: <div class="divClass"> <form id="frm" method="post" action="/NotDefinedYet/index.xhtml" class="frmClass"> <input type="text" name="j_idt9:j_idt10:Username" placehold ...

htmlcss

Ways to consistently press a particular button every single second

The code on the webpage looks like this: <div id="content"> <div class="container-fluid"> Slots <p>The current jackpot is 23220!<p/> <p>You lose.</p> <form method=post action=/game ...

javascriptjqueryrepeatclicking