Ways to center the percentage on the progress bar

I'm having an issue with positioning the percentage 100% in the center of the element. I attempted adjusting the spacing in the JavaScript code, but so far it hasn't been successful.

Here is the current output for the code: http://jsfiddle.net/GZSH6/53/

Here is the JavaScript code snippet:

var progress = setInterval(function () {
    var $bar = $('.bar');

    if ($bar.width() >= 550) {
        clearInterval(progress);
        $('.progress').removeClass('active');
    } else {
        $bar.width($bar.width() + 55);
    }
    $bar.text($bar.width() / 5.5 + "%  ");
}, 800);

Answer №1

Check out this DEMONSTRATION

jQuery

let interval = setInterval(function () {
    let $bar = $('.bar');

    if ($bar.width() >= 520) {
        clearInterval(interval);
        $('.progress').removeClass('active');
        $bar.text("100%");        
    } else {
        $bar.width($bar.width() + 50);
        $bar.text($bar.width() / 5 + "%");
    }

}, 800);

CSS

.bar{
   max-width:520px;    
}

Answer №2

<div style="width: 590px;text-align:left;text-indent:202px" class="graph-bar">107.27272727272727%</div>

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

What steps do I need to take to generate a terrain similar to this using Three.js?

Trying to construct a terrain based on a heightmap with an enclosed bottom layer. Refer to this example for clarification: The current function for generating the terrain is as follows: var img = document.getElementById("landscape-image"); var numSegment ...

Tips for Utilizing the Accurate Google Map Code within Jquery Tabs

Looking for assistance in properly integrating Google maps into jQuery tabs. I am trying to incorporate two maps into the project. One map to display the location and another map to provide directions. Encountering an issue with the code, as Firebug rep ...

What is the process for retrieving the value of `submit.preloader_id = "div#some-id";` within the `beforesend` function of an ajax call?

In my JavaScript code, I have the following written: var formSubmit = { preloaderId: "", send:function (formId) { var url = $(formId).attr("action"); $.ajax({ type: "POST", url: url, data: $(formId).serialize(), dataTy ...

What are the steps to troubleshoot and fix the Internal Server Error on Next.Js?

I recently set up a new Next.js app using the command npx create-next-app. After that, I added Sass to my project with yarn add sass and proceeded to run it with yarn dev. To my surprise, I encountered multiple errors in both my terminal and on localhost. ...

AngularJS OAuth authentication Pop-up: Waiting for JSON response

I am looking to initiate an oauth request in a new window for my project. Here is how I can open the new window: var authWindow = $window.open("/auth/google/signin", ""); After the callback, my server will respond with JSON data: app.get('/auth/ ...

guide on launching react with pure javascript

Is it feasible to operate react "straight out of the box" using only JavaScript? In essence, I am seeking a way to utilize react by simply utilizing notepad to create the page (without needing to install and configure node etc.). More specifically - 1) ...

Positioning a div with text over an image in a way that it

Hey everyone, I've run into a bit of an issue with my project. I'm trying to create a system where text appears over an image, but the problem is that my div is set to absolute position and I can't switch it to relative without causing major ...

The JQuery remove button within the list does not function for every box

I have a list where each li element contains a remove button to delete it when clicked. However, I am encountering an issue where the remove button only works for the first item in the list and not for the rest of the li elements. I am unsure about what mi ...

Creating a responsive loading button using Bootstrap 5

I'm struggling to create a button that displays a loading message. In my HTML file, I have: <div class="btn-area"> <button id="connectMetamaskBtn" class="btn sp-btn" type="button" ...

Choosing a single radio button value within a nested ng-repeat loop in AngularJS

Help needed with selecting only one radio button value in nested ng-repeat. Please review the source code and suggest any potential mistakes. <form ng-submit="save()"> <div ng-repeat="x in surveyLst"> <div class="row"> < ...

Navigating Assets within NodeJS Module

I'm facing a challenge with my NodeJS module that is designed to translate XML to HTML using an XSL file. The issue arises when I try to package the XSL file along with the rest of the module. Currently, the XSL file is located inside the source fold ...

What are some ways to streamline this D3 script?

My CSV data displays pass rates by organisation for different years: org,org_cat,2004_passed,2004_total,2005_passed,2005_total,2006_passed,2006_total GSK,industry,35,100,45,100,55,100 I am using D3 and aiming to create a dictionary of organisations struc ...

Encountering issues while trying to duplicate react-table CodeSandbox: API error when using localhost

Trying to implement this CodeSandbox project into my own project has been challenging. On navigating to the Example component, a 404 error pops up: Error: Request failed with status code 404. The API is targeting this endpoint: http://localhost:3000/api/pr ...

When navigating to an external dialog, the rounded corners are no longer visible after changing the page

When using JQuery Mobile 1.3.1 to load an external view into the DOM using $.mobile.changePage, I ensure that the correct options are used to load the view as a dialog. However, I am facing an issue where the rounded corners on the dialog seem to disappear ...

Adjust the scroll bar to move in the reverse direction

I'm trying to modify the behavior of an overlay div that moves when scrolling. Currently, it works as expected, but I want the scroll bar to move in the opposite direction. For example, when I scroll the content to the right, I want the scroll bar to ...

Performing a request following a POST operation within Postman

Currently, I am using a Post method on a URL which is expected to be written into a database. What I would like to do is create an "if" statement within the test tab in Postman to check the status of the response and then run a query to confirm that the ...

`Trying to conceal the tr elements on button click proves tricky with jquery`

I have a pair of buttons, #btn1 and #btn2, as well as two table rows, #tr1 and #tr2. The goal is to toggle the active state of the buttons when they are clicked by the user. The specific requirements are: When the button is set to active, the elements ...

Switching images using jQuery when hovering over navigation bar items

I'm attempting to implement a jQuery function that swaps images in the navigation bar based on user hover actions. The image displayed should vary depending on the height of the element being hovered over. Currently, I have the following code which i ...

Utilize React to showcase all stored items in localStorage in a Material UI List

I have a storage system with multiple items stored in it. I am looking to retrieve all of them and showcase them using a <ListItem> from Material UI. This is my current code snippet: function saveItem(key, value) { localStorage.setItem(key, value) ...

Sorting images can be quite a challenge

Struggling to organize images with jQuery. Reviewed http://jqueryui.com/demos/sortable/#display-grid, and it's functional. The issue arises when sorting images left to right, causing the form to shift left (but not vice versa). Despite adjusting margi ...