Shading half of the progress bar

I need to fill 50% of the progress bar with a red color. This is my attempt using HTML and CSS:

.progress {
  width:100%;
  display: inline-block;
  height: 0.4615384615384615em;
  padding: 0.0769230769230769em;
  background: #fff;
  border: 1px solid #c0c0c0;
  position: relative;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  background: #f9f9f9;
  background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
  background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
  filter: none \9;
}
.progress.complete {
  height: 0.9em;
  position: relative;
}
<div id="id1" class="progress complete">
    <span title="" style="background: red; left: 0%; width: 50%; box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);" rel="tooltip"></span>
</div>

Is there a way to achieve this without modifying the text content within the <span> element in the output?

htmlcss

Answer №1

Don't forget to add the height and position attributes to the span tag

.progress {
  width:100%;
  display: inline-block;
  height: 0.4615384615384615em;
  padding: 0.0769230769230769em;
  background: #fff;
  border: 1px solid #c0c0c0;
  position: relative;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  background: #f9f9f9;
  background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
  background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
  filter: none \9;
}
.progress.complete {
  height: 0.9em;
  position: relative;
}
<div id="id1" class="progress complete">
    <span title="" style="background: red; left: 0%; width: 50%; box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);height: 100%; position: absolute;top: 0;" rel="tooltip"></span>
</div>

Answer №2

If you wish to achieve this without utilizing the span tag, you can employ the pseudo selector ::after in the following manner for styling purposes:

.progress {
  width:100%;
  display: inline-block;
  height: 0.4615384615384615em;
  padding: 0.0769230769230769em;
  background: #fff;
  border: 1px solid #c0c0c0;
  position: relative;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  background: #f9f9f9;
  background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
  background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
  filter: none \9;
  overflow:hidden;
}
.progress:after{
  content:'';
  position:absolute;
  background: red; 
  left: 0%;
  top:0;
  width: 50%;
  height:10px;
  box-shadow: 0px 2px 1px rgba(0,0,0,0.2), inset 0px 2px 1px rgba(0,0,0,0.2);
  z-index:9;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}
<div id="id1" class="progress complete">

</div>

The default display property of the span tag is set to inline, therefore it is necessary to update it to inline-block along with adjusting its height.

.progress {
  width: 100%;
  display: inline-block;
  height: 0.4615384615384615em;
  padding: 0.0769230769230769em;
  background: #fff;
  border: 1px solid #c0c0c0;
  position: relative;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  background: #f9f9f9;
  background: -moz-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
  background: -webkit-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -o-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: -ms-linear-gradient(top, #ffffff 0, #f2f2f2 100%);
  background: linear-gradient(to bottom, #ffffff 0, #f2f2f2 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f2f2f2, GradientType=0);
  filter: none \9;
  overflow: hidden;
}

.progress.complete {
  height: 0.9em;
  position: relative;
}

span {
  background: red;
  left: 0%;
  width: 50%;
  height: 15px;
  display: block;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
   box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2), inset 0px 2px 1px rgba(0, 0, 0, 0.2);
}
<div id="id1" class="progress complete">
  <span title="progress bar" rel="tooltip"></span>
</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

Tips for avoiding incorrect data entry in input fields

Is there a way to prevent the input type number from having an undefined value? For instance, like shown in the image below: https://i.sstatic.net/z1pZH.png Any ideas on how to restrict the input to only accept plus or minus values? ...

phpjqueryhtml

What is the best way to utilize multiple props within a single callback function declared in a template literal when using React styled-components?

I recently incorporated styled components into my React project, but I'm encountering difficulty using multiple props to define styles in my components. Here's the crux of the problem: const sizes = { lg: css` width: 200px; h ...

javascriptcssreactjsstyled-components

I'm experiencing difficulty getting my code to function properly when adding or removing classes with Bootstrap Glyphicons

Recently, I decided to play around with bootstrap's glyphicons. By utilizing Jquery's addClass and removeClass functions, I tried to smoothly transition from one glyphicon to another. Here is the code snippet: var glyphOn = true; //The glyphO ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using JavaScript variables within an HTML tag

I am attempting to embed a JS variable into HTML tags, but for some reason the movie is not loading. Here is the code I am using: var filmLocation = "images/main.swf"; <script>document.write('<PARAM name="movie" value="' + filmLocat ...

javascripthtml

Create paper "cut" borders using HTML canvas or pseudo-elements

As a designer with a penchant for pain, I am striving to achieve an "art nouveau" aesthetic on paper for my NextJS project with MUI as the main design solution. Despite the abundance of CSS in the background, I am faced with the challenge of creating inner ...

csscanvasnext.jscss-selectorsborder

Issue: Invalid element type detected: expected a string (for built-in components) or a class/function

Currently, I am in the process of learning how to make API calls using React Redux. I decided to practice by implementing an example in StackBlitz. However, I encountered an error after selecting a channel and clicking on the 'Top News' button. C ...

htmlcssjsonreactjsredux

Utilizing JavaScript to dynamically update the user interface after submitting a form using jQuery

I am working on implementing an Input element that triggers a form submission: <input type="submit" value="Download" id="downloadButton" class="btn-download" /> The specific requirement is for the button to first execute a javascript function and t ...

javascriptjqueryhtml

CSS ID selectors are not functioning properly

In my React.JS project, I am working with a div that contains a button and a list. The list is specifically identified by the id "results". return <div> <Button label="Combine Cards" disabled={!this.props.combineReady} onClick={this.handleCli ...

javascripthtmlcssreactjs

Displaying a single row of a PHP array in bold formatting

I have a MySQL query result showing user information and subjects they have chosen. I want to highlight one specific row by making it bold using PHP while keeping the rest as regular text. How can I achieve this? $resultSet = $db->query ("...my q ...

phphtmlarrays

The height of the textarea is too excessive

Just a quick question - in my HTML, I have a simple textarea nested within the body tags. Within my JavaScript, I am using jQuery to ensure that the body element is dynamically resized to match the height of the window: $(function() { $("body").heigh ...

jqueryhtmlcsstextarea

unable to record the input value in jquery

Snippet for HTML code: <div id="Background"> <input id="search-Bar" type="text"> <button id="SearchButton">Search</button> </div> var name = $("#search-Bar").val(); $("#SearchButton").on("click", function() { co ...

javascriptjqueryhtml

Having trouble uploading an image URL into a Vue component?

I'm currently facing an issue while creating a Vue tag component, as I am unable to pass the source to the template html <card aposter="assets\images\poster.png" aname="a title"> </card> JavaScript Vue ...

javascripthtmlvue.jsvue-componentvue-props

Incorporate dual repeated background images within one div element

I am struggling to apply two repeating background images in the X direction for my div. Is there a way to achieve this? I want to divide my single div into two equal parts, using the first image with background repeat-x for the first part and the second ...

htmlcss

The selection made in the drop-down menu fails to redirect to the specified link

After implementing a dropdown menu in bootstrap with links set using PHP code to specify the path, I encountered an issue. Even after attempting without PHP, the result remains the same - when selecting an item and clicking the submit button to pull the ca ...

phphtmlcssbootstrap-4

The functionality of Small Caps is not supported by Twitter Bootstrap when using Chrome browser

I am working with a very basic markup <h1> <a href="#"> My Title </a> </h1> and I have this CSS applied h1 { font-variant: small-caps; } You can see the result on this jsfiddle link. The problem arises when u ...

csstwitter-bootstrap

Troubleshooting CSS: Issue with :nth-child(3n):after clearfix functionality

Hey there! I've been experimenting with some CSS code that I thought should work, but unfortunately it's not displaying properly in Google Chrome. <ul> <li><a href="...">bla</a></li> <li><a href="...">bl ...

csscss-selectorsclearfix

Preventing jQuery-ui from adding extra classes to buttons

In my current project, I am dealing with a limited space for a button. After successfully designing the button to fit perfectly within this constraint and adding the necessary classes class="btn btn-default" (borrowed from Twitter's Bootstrap), I deci ...

cssjquery-uijquery-ui-dialog

Ways to create a unique animation for reducing the width of a div in a specific direction?

Currently, I have managed to animate the decrease in width of a div element. However, it is currently decreasing from right to left, and I would like it to decrease from left to right instead. Can someone please provide guidance on how to achieve this? ...

htmlcssanimation

Responsive design issues with Bootstrap 3 box layout

I am currently working on creating a bootstrap4 layout that includes three boxes arranged side by side on a wide screen. However, my goal is to ensure that if the screen size decreases, the red and green boxes always stay adjacent to each other while the b ...

javascripthtmlcssbootstrap-4responsive-design

jQuery - final slide not triggering interval, causing animation malfunction

I am working on creating a slider using multiple divs instead of images. I have a total of 3 divs, and while the first two transition smoothly as intended, the third div seems to fly away too quickly - it briefly appears and then snaps back to the first di ...

javascriptjqueryhtml