Ways to maintain span element stability in a progress bar using CSS

I have been struggling with a CSS issue involving a progress bar that displays the remaining time. No matter what I do, the time text keeps moving to the left as the progress bar narrows. I have tried numerous methods to keep the text centered and prevent it from shifting, but nothing seems to work. Any assistance would be greatly appreciated!

CSS:

.progress {
  background: rgba(255,255,255,0.1);
  justify-content: flex-start;
  border-radius: 100px;
  align-items: center;
  position: relative;
  padding: 0 5px;
  display: flex;
  height: 20px;
  width: 300px;
}

.progress-value {
  
  box-shadow: 0 10px 40px -10px #fff;
  border-radius: 100px;
  background: red;
  height: 15px;
  
}

The div (the div with the ID timer needs to be in the middle of the progress bar and it should not move while the progress bar is decreasing!)

<div class="progress">
<div id='progress' class="progress-value"><span id='timer' style="display: inline; width: 300px !important;"></span></div></center></div></center>
htmlcss

Answer №1

To achieve the desired effect, I nested the progress bar and time element within an additional div with a position relative attribute. This allowed me to absolutely position the time element within the div, ultimately centering it.

The key to keeping the time element in place is that it is no longer part of the document flow, but its containing div still occupies the same space as the progress bar.

.progress {
  background: rgba(5,5,5,0.5);
  justify-content: flex-start;
  border-radius: 100px;
  align-items: center;
  padding: 0 5px;
  display: flex;
  height: 20px;
  width: 100%;
}

.progress-value {
  box-shadow: 0 10px 40px -10px #fff;
  border-radius: 100px;
  background: red;
  height: 15px;
  width: 35%;
}

.progress-and-timer {
position: relative;
}

.timer-value {
  position: absolute;
  text-align: center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 20px;
  color: white;
  font-family: Arial, sans-serif;
font-size: 14px;
line-height: 20px;
}
<div class="progress-and-timer">
<div id="timer" class="timer-value">time</div>
<div class="progress">
<div id="progress" class="progress-value">
</div>
</div>
</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

Include a new row in the form that contains textareas using PHP

I'm trying to add a new row to my form, but I'm facing challenges. When I click the add button, nothing happens. If I change the tag to , then I am able to add a row, but it looks messy and doesn't seem correct to me. Here is my JavaScript ...

javascriptphphtmlformsrow

What is the best method for inserting every item from a textarea into my database?

I have encountered an issue with the code I am currently using. I have a modified version of this code implemented on another page, where a textbox is used instead of a textarea. Interestingly, the textbox version works perfectly fine. However, on my cur ...

phpmysqlhtmltextarea

"Create a smooth transition effect in CSS by fading out one div and fading in

I've set up a grid of buttons, and my goal is to have the grid fade out when a button is clicked, then fade in with a new div in its place. This involves animating opacity from 1 to 0 and vice versa while toggling the display:none property for content ...

javascriptcss

Utilize the entire width of the page by evenly dividing it into different components and considering the occurrence of maximum

I have a code where I inserted a component (product), and I want it to take up the full width of the container. If there is only one component, it should use the full width, and if there are 2 or more, they should evenly distribute across the whole width. ...

htmlcssreactjsgridbootstrap-5

Simple solution to resetting class in an element upon clicking another element

Is there a way to reset the glyphicon of one column back to its original state when another column is clicked while sorting a table using bootstrap glyphicons? $('.tablePointer').click(function() { $(this).find('i').each(func ...

javascriptjqueryhtml

JavaScript code to automatically pause/play HTML5 videos when scrolling

I'm working on creating a video gallery using HTML5 and JS. I've managed to set it up so that you can scroll horizontally between autoplaying muted HTML5 videos, and the videos play or pause when scrolled into or out of view. Everything is functi ...

javascripthtmljquery

What is the best way to submit an HTML form using formsubmit.co without the page redirecting?

I've been working on creating an HTML form using Bootstrap that sends the collected information to my email address. To achieve this, I am utilizing formsubmit. However, upon submitting the form, it currently redirects the page to a 'success&apo ...

javascripthtmlbootstrap-4

Switch between input and the input is not displayed inline

I've been struggling to align the Toggle button with the input box for quite some time now. I really need them to be inline so that they form a grid properly as everything is dynamic. I have experimented with using a Div on its own instead of a label ...

htmlcss

Are connections established between different pages using sockets?

After navigating from Page A to a link that opens Page B as a popup within the same domain, various operations are performed in the popup window. Once these operations are completed, there is a need to update certain div elements on Page A. What are the ...

c#html.netsocketsasynchronous

How can we apply CSS to all pages except for one containing the "howto" placeholder?

Hey, we're dealing with multiple pages that require CSS styling. .cms-index-noroute .col-main .std {font-weight: bold} .cms-index-list .col-main .std {font-weight: bold} .cms-index-view .col-main .std {font-weight: bold} We'd prefer to simplify ...

csscss-selectors

Using ngModel for binding can lead to the disappearance of line breaks in text within a textarea

I need to display a string that is returned by an external server in the format of "line1\nline2". However, when using ngModel to bind this string to a textarea, it displays line1\nline2 instead of line1 line2 I also tried using ngBind but that ...

javascripthtmlangularjstextarea

Adjusting image dimensions dynamically using JavaScript based on screen size

My bootstrap setup seems to be causing issues when using the @media (min-height: 1000px) rule as the image class does not respond as expected. I am looking to implement a JavaScript solution that will automatically resize images once the screen height exc ...

javascriptjquerycss

What are the best ways to engage with a div element using keyboard shortcuts?

Is it possible to enable keyboard shortcuts for interacting with div elements? I am working on a project tailored for seniors who may have difficulty using a mouse. Is there a way to utilize keyboard shortcuts to click on divs and access their contents? H ...

javascriptjqueryhtmlcss

What is preventing my basic icons from showing up?

I am currently in the process of designing a "flat design" website, and I have opted to incorporate Simple Icons into my project. My goal is to have the background of the Simple Icon darken while the white overlay image remains unchanged. To achieve this e ...

css

Utilize TypeScript File array within the image tag in HTML with Angular 2

I am in the process of developing a web application that allows users to upload CSV data and images, which are then displayed on the application. However, I have encountered an issue where I am unable to display the imported images. The images are imported ...

htmlangulartypescript

How to change the background color of select options using JQuery

My webpage includes multiple select boxes with different options: <select name="item-0-status" id="id_item-0-status"> <option value="">---------</option> <option value="1">Online</option> <option value="2">Offline</o ...

jquerycss

preventing sliding in a specific angle within the angularjs ionic framework

I am completely new to angularjs and embarking on my very first app creation journey with the ionic framework. The initial step I took was to generate an ionic app using this command: $ ionic start myApp sidemenu The creation of the app went smoothly, co ...

javascriptcssangularjsionic-framework

When attempting to change the text in the textarea by selecting a different option from the dropdown list, the text is not updating

I am facing an issue with three multi-select dropdown lists. When a user selects options from these lists and then presses the submit button, the selected text should display in a textarea. However, if the user manually changes some text in the textarea ...

javascripthtmljqueryasp.netmodel-view-controller

Bootstrap: nav-link remains visible even after a dropdown-item is chosen

I am aiming to accomplish the following - when a dropdown-item from the navbar is selected, I want to execute BOTH of the following actions: Scroll to the div with the specified target id Collapse the navbar back to its initial state (fully rolled up, hi ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Tips for designing a user interface for a security software product

We have created a cutting-edge security tool that can detect unauthorized network traffic. The user interface for displaying alerts is generated by a Java Servlet page. Currently, the page functions as a sophisticated console log. It features a large text ...

htmlcssajaxservletsuser-interface