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

Exploring the Power of JQuery with Hover Effects and SlideToggle

I was struggling to keep the navbar displaying without it continuously toggling when my pointer hovered over it. I just wanted it to stay visible until I moved my pointer away. <script> $(document).ready(function(){ $(".menu-trigger").hover(funct ...

javascriptjqueryhtmlcsshover

Guide to capturing and playing audio on iOS6 with HTML5

Our team is currently working on a web application using HTML5 and Javascript. We are facing a challenge with implementing voice recording functionality, as the Wami Api we tried is not compatible with iPad due to its use of flash for recording. Could yo ...

javascriptjqueryhtmlios6

When interacting with the iframe in an Ionic3 app, it suddenly crashes

Greetings! I have integrated a flipping book URL inside an iframe: <ng-container> <iframe [src]="eUrl" id="flipping_book_iframe" frameborder="0" allowfullscreen="allowfullsc ...

javascriptangulartypescriptiframeionic3

Django and VueJS: Error 403 - Forbidden request due to missing or incorrect CSRF token

My tech stack includes Django and Django REST framework on the backend, along with Vue.js on the frontend. While GET requests function smoothly and POST requests using Postman or Insomnia work fine, encountering an error in the Browser console when sending ...

javascriptpythondjangovue.jscsrf

Employing condition-based require() statements in JavaScript

I am currently experimenting with conditionally loading modules that are Vue components. Review the code snippet below for a better understanding: index.js My goal is to dynamically load different components based on the window URL (since I cannot use vu ...

javascriptvue.jswebpackcode-splitting

Unable to get the sublocality dropdown list to cascade properly in asp.net mvc

I am dealing with three dropdown lists. The initial action method for the City dropdown is shown below: public ActionResult Create() { List<SelectListItem> li = new List<SelectListItem>(); li.Add(new Sel ...

javascriptjqueryajaxjsonasp.net-mvc-4

How to handle an unexpected keyword 'true' error when using the `useState` hook in React?

Trying to set the open prop of the MUIDrawer component to true on user click is causing an error stating "Unexpected keyword 'true'" import React, { useState } from "react"; import { withRouter } from "react-router-dom"; impo ...

javascriptreactjsmaterial-uireact-lifecycle-hooks

Having issues with handling ajax response in a Node.js application?

I am encountering an issue with my ajax post request to my node js backend. After sending the request and receiving a response, instead of updating just the resulttoken in the view, the entire HTML page seems to be loaded according to the console. I am see ...

javascriptnode.jsajax

Is it possible for me to send JSON data using a form to HTTP_RAW_POST_DATA?

Currently, I am in the process of creating a web interface for code that is typically designed to run on Android devices. I transmit JSON data and retrieve the data by using the following method: $json = json_decode($HTTP_RAW_POST_DATA,true); Is there a ...

phphtmljsonpost

Monitoring Javascript inactivity timeouts

As I work to incorporate an inactivity timeout monitor on my page, the goal is to track whether individuals working from home are present at their desks or not. The Jquery plugin http://plugins.jquery.com/project/timeout that I am utilizing initiates a ti ...

javascriptjqueryhtmlajaxjquery-plugins

Changing a single state in React results in the modification of both states simultaneously

Whenever I attempt to modify one state, I find that another state is inexplicably changing as well. I've scoured my code for the issue but can't seem to pinpoint it. What steps should I take next? Here's the snippet of code in question: impo ...

javascriptreactjsreact-hooksjsxuse-state

SASS malfunctioning, error messages popping up in command prompt while running gulp serve

As I develop a web app using AngularJS and Gulp, I encounter an issue where the CSS does not seem to work when running 'gulp serve'. Despite attempting to reinstall various components like node_modules, Node.js, and Gulp, the same error persists. ...

cssangularjssassgulp

The asynchronous ajax function fails to work properly when setInterval is activated

My issue is that only the initial execution of the updateProgress function happens while waiting for the completion of syncDNS. All subsequent calls made via setInterval remain on hold until syncDNS finishes. Can anyone explain why this is happening? $( ...

javascriptjqueryajax

Shiny silver finish using three.js technology

I have recently started exploring three.js and am attempting to replicate a cube that looks like this: https://i.sstatic.net/CO9Eq.jpg One aspect I'm struggling with is creating the material for my cube. The material appears to be a silver polished fi ...

javascriptthree.js

Dragging and dropping elements onto the screen is causing them to overlap when trying

I am having trouble merging the drag and drop functionality from Angular Material with resizing in a table. Currently, both features are conflicting and overlapping each other. What I am hoping for is to automatically cancel resizing once drag and drop s ...

cssangulartypescriptangular-materialangular9

The CSS and Javascript files are failing to load

My web page is not displaying my CSS and JavaScript properly when I access it through a folder in the browser. Both files are located within multiple subfolders. I have attempted to rename the files to troubleshoot the issue. <head> <link rel=" ...

javascripthtmlcss

Unable to store the data retrieved from MySQL into an array

Every time I try to add the object result1 to the array a, it ends up empty. Can someone help me figure out what I'm doing wrong? app.get('/freezer', (req, res) => { var a = []; var sql = `SELECT freezer_id FROM freezer_data`; ...

javascriptmysqlnode.jsarraysexpress

The iframe is not adjusting its size in relation to the parent window

For more information, click here: http://jsfiddle.net/5HYve/ <div style="position: fixed; top:0; right:0; width:300px; height: 100%; text-align:justify; overflow:hidden;" class="chat-container"> <iframe id="chat_1" style="width:300px;height:1 ...

htmlcssiframeresize

What is the most effective method for incorporating a floating section next to a Susy gallery?

Check out my latest progress on the codepen here The number of items displayed in the gallery is dynamic based on search results. However, I am looking to add a fixed area to the right side that remains visible as the user scrolls through the gallery. Ess ...

htmlcsssasscompass-sasssusy

When attempting to use $.ajax to send JSON, it instead sends a query string

I'm having an issue where I'm using ajax to send JSON data with the following script: var sendData = {"test":"opa"}; console.log(sendData); $.ajax({ contentType: "application/json", method: "POST", url: "/test", dataType: "json", ...

javascriptjqueryajax