Exclusive Design for Progress Bar in HTML and CSS

I am currently working on creating a unique progress bar with numbers at both ends, where the left number represents the current value and the right number represents the maximum or target value. Although I have managed to display the two numbers, I am facing difficulty in positioning the right-hand number accurately.

My goal is to...

and what I have so far is...

This is the code snippet I currently have...

JSFiddle

.progress-outer {
  width: 96%;
  margin: 10px 2%;
  padding: 3px;
  text-align: center;
  background-color: #f4f4f4;
  border: 1px solid #dcdcdc;
  color: #fff;
  border-radius: 20px;
}

.progress-inner {
  min-width: 15%;
  white-space: nowrap;
  overflow: hidden;
  padding: 5px;
  border-radius: 20px;
  background-color: orange;
}

.progressBarCurrent {
  color: black;
  float: left;
}

.progressBarGoal {
  color: black;
  float: right;
}
<div class="progress-outer">
  <div class="progress-inner" style="width:27%;">
    <span class="progressBarCurrent">50g</span>
    <span class="progressBarGoal">180g</span>
  </div>
</div>

I have attempted placing the second span outside the progress inner div, but it ended up displacing the text altogether. I couldn't figure out how to position it correctly within the progress bar. Any assistance would be greatly appreciated.

Can someone provide guidance on this issue?

htmlcss

Answer №1

If you're looking for a unique approach, my solution involves utilizing linear gradients to achieve the desired effect. You can experiment with adjusting the margins and outline properties to perfect the border appearance.

.progress-outer {
  width: 96%;
  display: flex;
  height: 35px;
  margin: 10px 2%;
  text-align: center;
  border: 1px solid #dcdcdc;
  background-image: linear-gradient( 80deg, orange 37% , #f4f4f4 37% );
  border-radius: 20px;
  justify-content: center;
  align-items: center;
}

.progressBarCurrent {
  color: black;
  text-align: left;
  width: 50%;
  position: relative;
  margin: 0px;
  margin-left: 20px;
}

.progressBarGoal {
  color: black;
  position: relative;
  text-align: right;
  width: 50%;
  margin: 0px;
  margin-right: 20px;
}
<div class="progress-outer">
  <span class="progressBarCurrent">50g</span>
  <span class="progressBarGoal">180g</span>
</div>

Answer №2

Opt for position:absolute over float:left

.progress-outer {
  width: 96%;
  margin: 10px 2%;
  padding: 3px;
  text-align: center;
  background-color: #f4f4f4;
  border: 1px solid #dcdcdc;
  color: #fff;
  border-radius: 20px;
    position: relative;
}

.progress-inner {
  min-width: 15%;
  white-space: nowrap;
  overflow: hidden;
  padding: 5px;
  border-radius: 20px;
  background-color: orange;

}

.progressBarCurrent {
  color: black;
  float: left;
}

.progressBarGoal {
  color: black;
  position: absolute;
  right: 5px;
}
<div class="progress-outer">
  <div class="progress-inner" style="width:27%;">
    <span class="progressBarCurrent">50g</span>
    <span class="progressBarGoal">180g</span>
  </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

Bootstrap4 allows for a scrollable table body feature

Why am I unable to apply scroll for the table body with a fixed header using Bootstrap-4? I have used min-height and overflow properties to achieve this, but it doesn't seem to work. Does Bootstrap4 not support scrolling on table bodies? The snippet b ...

htmlcssbootstrap-4

Text alignment post-rotation

Whenever I rotate a span, the text inside does not align horizontally. As shown in the example below, we are facing alignment issues with three rotated spans. body{ padding-left:10px; } .bordered{ border-left: 2px solid gray; position: relative ...

htmlcss

Trouble with CSS positioning

Styling with CSS: .one { width: 13%; } .two { width: 30%; } .three { width: 30%; } Formatting in HTML: <table> <tr> <th class= "one">Quantity</th> <th class= "two">Info</th> ...

htmlcss

difficulty encountered when transmitting data via ajax to an express server

Just starting out with backend and ran into an issue when trying to send data using vanilla ajax to my express server. Can anyone spot where I might be making a mistake? Here is my ajax request: var xhttp = new XMLHttpRequest(); xhttp.onload ...

htmlnode.jsajaxexpress

The function $.ajax may not be available, but rest assured that the jquery library is functioning properly

Upon checking the console, I noticed the following: Here is the AJAX code snippet in use: $("#accept").click(function(){ id = $("#idInput").val(); password = $("#passwordInput").val(); alert(id) alert(password) $.aja ...

jqueryhtmlajax

Demonstrating various elements within an application using Vue3

I created two components and attempted to display them in a Vue 3 application. Here is my HTML code: <div id="app"> <image_preview> URL: [[image]] </image_preview> <file_uploader> Counter:[[coun ...

javascripthtmlvue.jsvuejs3

When inserting <img>, unwanted gaps appear between div elements

When I have <img> in the child divs, there is some space between them and a blue stripe appears under the image. How do I make them stack perfectly without any gaps? I am new to HTML and CSS and trying to learn for marketing purposes. Any help or ad ...

htmlcss

Load Form with Json Data from LocalStorage Key-ID to Auto-Populate Fields

After successfully setting the ID in localStorage, I now need to retrieve and display only that specific record from my JSON data. The content of my localStorage is: This information is obtained from my JSON data after a button click. The challenge is us ...

javascriptjqueryajaxjsonhtml

Receiving time slots on a bootstrap schedule

I recently developed a calendar using Bootstrap that allows users to select a start date and automatically sets the end date within a 7-day range from the chosen start date. However, I am facing a challenge in enabling users to also pick minutes along with ...

javascripthtmltwitter-bootstrap

Creating a set width for the input-group-append division in Bootstrap 4

I am currently utilizing the power of Bootstrap 4's input group feature to position an icon next to an input field. My goal is to set a fixed width of 40px for the div containing the input-group-append (which houses the icon). According to the offici ...

csstwitter-bootstrapflexboxbootstrap-4

In Firefox 50.0, the button's resizing feature causes the parent div container outline to adjust size

I am currently working on developing a responsive design with the feature of having a button that appears to "float" under a div element. My desired outcome is achieved in Opera and Chrome: In Firefox, the result is not as expected: You can access my co ...

htmlcssfirefoxflexboxoutline

Troubleshoot: Problem with iPhone Orientation on Bootstrap Framework

While working on a responsive website design, I encountered an issue that needs addressing. Initially, switching from portrait mode to landscape didn't trigger the expected responsive behavior; instead, it simply zoomed into the site. To prevent this ...

htmlcsstwitter-bootstrap

Validating emails using angular material chips

I'm currently working on implementing a form that utilizes input chips to facilitate sending messages to multiple email addresses. While I've made progress in making the form functional, I'm facing difficulties in displaying error messages w ...

htmlangulartypescriptformsvalidation

What measures can be taken to stop LESS partials from compiling independently?

When working with LESS, I utilize partials that are included (@include) into the main LESS stylesheet. A common issue I face is that each partial ends up compiling to its own CSS file, leading to project clutter. In SASS, if a file is named with an unders ...

csslessphpstorm

iOS fixed positioning and scrolling

One of the current challenges we are facing involves implementing an action button similar to the one found in GMail for adding new content. This button needs to remain fixed during scroll. Here is the HTML code: <div class="addButton actionButton" on ...

javascriptioscsscss-position

Stop Gulp Inline CSS from enclosing HTML content within html and body elements

I need to work on a piece of HTML that I plan to copy and paste directly into an existing document. Here is the code snippet: <div id="someDiv"> </div> <script src="js/someScript.js" inline></script> <style> div#someDiv { ...

htmlgulp

HTML // jQuery - temporarily mute all audio for 10 seconds after page reload

Is there a way to automatically mute all audio sounds on my website for the first 10 seconds after it is reloaded, and then unmute again? <audio id="musWrited" autoplay> <source src="sound/soundl.mp3" type="audio/mp3" /> // < ...

javascriptjqueryhtmlaudio

Guide to implementing a slider in HTML to adjust the size of my canvas brush

Hey there, I'm looking to implement a slider functionality under my canvas that would allow users to change the brush size. Unfortunately, all my attempts so far have been unsuccessful. Can anyone lend a hand? Much appreciated! <canvas i ...

javascripthtmljquerycss

Can someone explain the method for displaying or concealing a menu based on scrolling direction?

https://i.stack.imgur.com/tpDx0.jpg I want to hide this menu when scrolling down and show it when scrolling up. The code for my menu bot is: <script> var previousScroll = 0; $(window).scroll(function(event){ v ...

javascriptjqueryhtmlcss

What is the best way to line up a Material icon and header text side by side?

Currently, I am developing a web-page using Angular Material. In my <mat-table>, I decided to include a <mat-icon> next to the header text. However, upon adding the mat-icon, I noticed that the icon and text were not perfectly aligned. The icon ...

htmlcssangulartypescriptangular-material