What is the best way to preserve the background color of nested progress bars?

In this scenario, I am attempting to apply border-radius specifically to the upper and lower right corners of the progress bars. The idea is to create a cascading effect where each color (red, green, and blue) progress bar overlaps slightly with the next one, showcasing a multi-layered look. For a better understanding, refer to the visual representation below:

https://i.stack.imgur.com/gfwjJ.png

.customer-count-container .progress {
  box-shadow: 0px -4px 4px -2px rgba(0, 0, 0, 0.25) inset, 0px 3px 2.8px 0px rgba(255, 255, 255, 0.8) inset;
  overflow: hidden;
}

.customer-count-container .progress .progress-bar:nth-child(1),
.customer-count-container .progress .progress-bar:nth-child(2),
.customer-count-container .progress .progress-bar:nth-child(3) {
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="06646969727572746776463228302834">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="progress" style="width: 35%; height: 10px">
  <div class="progress-bar" style="width: 20%; background-color: var(--red)"></div>
  <div class="progress-bar" style="width: 35%; background-color: var(--green)"></div>
  <div class="progress-bar" style="width: 45%; background-color: #4d7a90"></div>
</div>
htmlcssbootstrap-4

Answer №1

To enhance the visual impact, consider making the bars cumulative in design. This means each bar builds upon the value of the previous one. Don't forget to apply rounded corners to all edges for a polished look.

For proper alignment, position the bars absolutely so they overlap neatly. Remember to adjust their order or utilize z-index values if the document order plays a crucial role.

Take note that the shadow effect has been cleverly placed on a pseudo-element to seamlessly blend with the bars.

.progress::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0px -4px 4px -2px rgba(0, 0, 0, 0.25) inset, 0px 3px 2.8px 0px rgba(255, 255, 255, 0.8) inset;
}

.progress .progress-bar {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="accec3c3d8dfd8decddcec98829a829e">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="progress position-relative m-2" style="width: 35%; height: 10px">
  <div class="progress-bar" style="width: 100%; background-color: #4d7a90"></div>
  <div class="progress-bar" style="width: 55%; background-color: var(--green)"></div>
  <div class="progress-bar" style="width: 20%; background-color: var(--red)"></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 a timer to make Ajax calls twice on a single webpage

Can multiple ajax calls be made simultaneously on the same page to different receiving div tags? I am struggling to find a solution to this issue. I have a total of 3 pages: a home page, and two PHP pages named status and alert which echo the results. Wi ...

javascriptphphtmlajax

Despite using twitter bootstrap, the elements on my webpage are still overlapping one another

While implementing Twitter Bootstrap on my website, I encountered a problem where elements start overlapping if the window size is reduced. This issue does not look appealing, and I expected Twitter Bootstrap to ensure that my website is fully responsive a ...

htmlcsstwitter-bootstrap

Angular 7: An unexpected error occurred when trying to inject TripsMenu into MenuWidgetComponent in AppModule

Encountering an issue in angular 7, where I am trying to inject my MenuWidgetComponent in the home component. I have imported it in the widget component and exported it via index.ts. However, the following error persists: I searched online but couldn&apos ...

htmlangulartypescriptangular6angular7

Personalizing bootstrap tabs

I'm currently working on a project that requires implementing custom-style tabs. I'm facing challenges in customizing the borders of the tabs, particularly rounding the red bottom border and adding space between the right border and bottom border ...

htmlcssbootstrap-5

Guide on hosting two html pages on a NodeJS server

Currently, I am in the process of learning NodeJS and Javascript with a goal to construct a basic server that can host 2 HTML pages. One page should be accessible via localhost:3000/index, while the other can be reached through localhost:3000/about. While ...

javascripthtmlnode.jsserver

How can I remove the blue highlight on text fields in a Chrome Extension?

I am currently developing a Chrome extension that allows users to edit a small text field. However, I am encountering an issue with the blue highlight that appears around the text field when clicked - I find it quite bothersome. Is there a way, possibly t ...

htmlcssgoogle-chrome-extensiontextfieldhighlight

How can I dynamically update an img src using JavaScript on a PHP webpage?

I have a PHP page where I display image thumbnails. I am trying to implement a feature where the thumbnail expands in another image on mouseover. Here is the PHP code snippet: echo "<tr><td><a href='$imgrow[location]' target=&ap ...

javascriptphphtml

Issues with the functionality of jQuery's .load() method are causing

I am encountering an issue for the first time. Inside ajax.html, I have the following code in the header: $(document).ready(function(){ $( "#result" ).load( "/loaded.html" ); }); In the same directory, there is a second page named loaded.html: <d ...

javascriptjqueryhtmlajax

When attempting to open the HTML file through an Express application, the background image specified by `background-image: url()` may

Upon opening the html file by directly clicking on it, the background-image styled with url() functions correctly. However, when I open this file within an express app using res.sendFile(), the background-image fails to display. Interestingly, all other CS ...

htmlcssexpress

Issues with scaling background videos in HTML5

I'm having trouble making a video scale properly with the browser window while still covering the entire area. Does anyone know why my current approach isn't working? HTML: <div class="bgVideoWrap"> <video id="bgVideo" loop="true" aut ...

csshtml

Customizing event colors in Full Calendar

My interactive calendar is created using : $('#calendar').fullCalendar({ height: 300, //............. events: jsonData, month: firstMonth }) I am looking to dynamically change the color of an event based on certain conditions ...

javascriptjquerycsscalendarfullcalendar

Convert your HTML document into a Microsoft Word file and see the total number of pages in

I have been experimenting with creating a Word document using HTML code. Thanks to various examples, I have made some progress. However, I am facing an issue where I cannot get the total number of pages to display as text on the first page of the document. ...

phphtml

Modify flex direction to column in response to changes in height of another div or when its content wraps

I am currently utilizing React MUI V5 and I am looking to modify the flex direction of a div from row to column when a preceding div changes in height or wraps. Below is a basic example of what I have implemented using plain HTML/CSS, but I am uncertain i ...

htmlcssreactjsflexboxmaterial-ui

How to create a responsive image that appears over a button when hovering in Bootstrap?

My goal is to display an image over a button when hovering. I've tried adding the .img-responsive class in Bootstrap while including the image in the HTML, but it's not working as expected with my current method of loading images. The buttons the ...

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3

I require assistance in developing a mouseover image link that conceals the top image and unveils a bottom image that scrolls vertically in the exact same area as the top

I am trying to achieve a similar effect as shown on: this website I require assistance in creating a mouseover image link that hides the top image and reveals a bottom image that scrolls vertically within the same space as the top image. The long vertica ...

javascripthtmlcssmouseoveronmouseover

step-by-step guide on showcasing and concealing textbox borders

Within a table, I have a column with a text box for users to edit the text as needed. The edited text is properly being saved using the onkeyup event. However, I want to hide the border of the text box after editing, so only the edited text is visible. If ...

htmlcss

Achieving vertical alignment in Bootstrap for card header

I'm troubleshooting a card layout on my Bootstrap page <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" cro ...

htmlcssbootstrap-4

Exploring the versatility of Angular by creating various flex layouts with Angular Material cards

I'm struggling to implement the design shown below using cards and a flex layout in a responsive way. I've tried working on it using StackBlitz but haven't been able to get it right - the margin and layout get messed up on different screens. ...

cssangularflexboxangular-material

Code that achieves the same functionality but does not rely on the

I utilized a tutorial to obtain the ajax code below. The tutorial referenced the library jquery.form.js. Here is the code snippet provided: function onsuccess(response,status){ $("#onsuccessmsg").html(response); alert(response); } $("# ...

javascriptjqueryhtmlajaxforms

Learn how to display two rows of div elements within a single div container

In my program, I am using a for loop to display multiple div elements in one row. The first div is showing up correctly, but I am having trouble inserting a new div that looks the same as the first one. How can I achieve this? Thank you in advance. "first ...

phphtmlcss