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

Using Javascript to Highlight a Single Row in a Table

Greetings esteemed members of the skilled community at StackOverflow, I must humbly ask for your expertise in solving a dilemma that I am currently facing. The situation is as follows: I have a table generated from an SQL query, and it is crucial for the ...

javascripthtmlhtml-table

Determine the row index by identifying the row id and table id

I need to retrieve the Index number of a row when a hyperlink is clicked, while also passing additional data from this tag. <a href="javascript:void(0);" onclick="EditDoctorRow(' + RowCountDoctorVisit + ');"> <i class="fa fa-edit"&g ...

javascripthtml

The issue of Ajax failing to execute an HTTP POST request in an HTML environment

I am creating a sample HTML code that involves making HTTP post requests using an Ajax function. The task at hand is to execute 2 HTTP POST requests and 1 GET request sequentially based on the correct response received. POST: URL: http://localhost:8082 ...

htmljsonajax

The scroll function is failing to activate at the desired location

I've been trying to fine-tune a window scroll function I created. Initially, I attempted to use waypoints for this, but unfortunately, I couldn't get it to work as expected. The main issue I'm facing is that the function triggers too early ...

javascriptjqueryhtmlfunctionscroll

Storing various data in separate tables using MySQL and Node.js

Currently, I am working with three tables - user, modules, and an intermediate table called user_module. To perform an inner join between the user and module tables, I need to access the user_module table. "SELECT user.uName, module.moduleName FROM user_m ...

htmlmysqlsqlnode.jsexpress

What could be causing this image to disregard the designated width value?

https://i.stack.imgur.com/bPH4t.png While working on my project with Next.js, I encountered an issue with the IconText component provided by Next.js. Even though I specified a width value for the image, it seems to be ignoring it. Below is the structure o ...

cssnext.js

Error: when trying to refresh TABLE DATA, an issue occurred with a stale element reference where the element is not connected to the

Apologies in advance for my poor grasp of the English language. I am working on a project where I need to continuously fetch row data from a table using driver.refresh() The first iteration works fine, and the data is retrieved for each row. However, when ...

pythonhtmlseleniumselenium-chromedriverstaleelementreferenceexception

What could be causing my websocket server to not properly serve my HTML page?

I'm currently facing an issue with establishing a web socket connection using NodeJS in my app.js file. Despite declaring a listener on port 8080, the connection is not getting established and no logs are being generated in the console. My goal is to ...

node.jshtmlwebsocketserver

How can I display a PHP variable in JavaScript?

I am having trouble displaying a PHP variable in Javascript; Below is the code I am using: <script type="text/javascript> $(document).ready(function (){ var n=<?php echo json_encode($count)?>; for(var i=0;i<n;i++){ var div ...

javascriptphpjqueryhtml

What is causing the collapsed-animation to malfunction in Vue3?

Why won't the transition animation function in vue3js? The animation does not appear to be working for me. I've implemented this library https://github.com/ivanvermeyen/vue-collapse-transition <template> <nav class="navbar color-d ...

cssvuejs3

Display a pop-up window when hovering over a table cell using HTML and JavaScript

I am currently developing a JavaScript application and came across a helpful library called qtip2. My objective is to have different information displayed when the user hovers over each cell in the table. The qtip2 library I mentioned earlier can display ...

javascripthtmlcss

"Creating Rounded Corners in HTML: A Step-by-Step Guide

Is there a way to round the corners of this image? Below is an excerpt from my body... <body> <h1 style="float:left; width:37%;"><font color="#99CC00"><font face="Verdana">MrEpicGaming4U</font></h1> <div style= ...

htmlcssimageborder

Dropdown menu is not positioning correctly over other elements on the webpage

After researching multiple stack overflow questions and attempting various solutions, I still haven't been able to resolve my issue. Please refrain from marking this question as a duplicate. The problem I am facing is that my dropdown menu is not ap ...

htmlcsssass

What are the possibilities for modifying a MySQL database using HTML?

Currently, I have a MySQL database managed through phpmyadmin that I would like to present as an HTML table for easy editing of records and columns directly. I am unsure about the terminology to use when researching possible solutions. What options are av ...

phpmysqlhtmldatabaseedit

Redesigning the reset Zoom feature of HighCharts using a button inspired by Material UI styling

Currently, I am developing a project that incorporates HighCharts and Material UI for the user interface design components. I am wondering if there is a method to substitute the default HighChart reset Zoom button with the Material UI button component? ...

cssreactjsuser-interfacehighchartsmaterial-ui

An issue with JSPDF arises when used on mobile devices

Currently, I am working on a project to create a responsive web application, which involves utilizing JSPDF for generating PDF reports directly from HTML. For a demonstration of the functionality, you can check out this Demo. Unfortunately, when trying t ...

javascripthtmljspdf

Adding a unique field to a specifically tailored post type

I'm dealing with a plugin-generated component that showcases articles from a custom post type, each with the class post-id. Unfortunately, I can't modify the plugin's files in the child theme to make changes, so I have to create a custom fun ...

phphtmljquerywordpressadvanced-custom-fields

When the ::after pseudo element is utilized for creating a bottom border, it will display following each individual list item contained within the specified div

I have been using a pseudo-element to create a division line between sections, and it was working perfectly until I added a list of items. Now, the division line is appearing after every <strong> and <li> tag. I have tried various approaches, s ...

htmlcsspseudo-element

The use of Material-UI collapse animation in a table results in the insertion of div elements, triggering a validateDOMNesting warning

Having a data-filled table, I am looking to implement smooth transitions when adding or deleting an item. This is a ReactJS project utilizing Material-UI. The desired effect is similar to the one demonstrated in their example. While they use a List compon ...

cssreactjshtml-tablematerial-ui

Switch up the font style of the title element

Is it possible to modify the font-family of the title attribute in an input field using either JavaScript or jQuery? <input type="text" title="Enter Your Name" id="txtName" /> ...

javascriptjqueryhtmlcss