Segment the progress bar into sections

Struggling with an Angular app, and still new to HTML and CSS, I am attempting to create a unique progress bar. I aim to split each section of the progress bar into two subsections with distinct background colors shown in this image: https://i.sstatic.net/8vTud.png

The code snippet I currently have is:

    .wrap {
      width: 100%;
      height: 30px;
      z-index: -2;
      white-space: nowrap;
      overflow: hidden;
    }
    
    ... (CSS properties and classes go here)

    <div class="wrap">
      <div class="progress">
        simple
      </div>
      <div class="progress">
        as
      </div>
      <div class="progress">
        complex
      </div>
      <div class="progress">
        Web Development
      </div>
    </div>

Seeking guidance on how to achieve this task. Any help would be appreciated.

htmlcssangularbootstrap-5

Answer №1

.wrap {
  width: 100%;
  height: 30px;
  z-index: -2;
  white-space: nowrap;
  overflow: hidden;
}

.wrap div:first-child {
  margin-left: -2%;
}

.progress {
  margin: 0;
  margin-left: 0.5%;
  height: 30px;
  width: 25%;
  position: relative;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  transition: all 0.8s;
}

.progress:before,
.progress:after {
  content: "";
  position: absolute;
  transition: all 0.8s;
  z-index: -1;
}

.progress:before {
  height: 50%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  transform: skew(45deg);
}

.progress:after {
  height: 50%;
  width: 100%;
  top: 50%;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  transform: skew(-45deg);
}
#div1{
width:60%;

}
#div2{
width:40%;

}

#div2:hover:before,#div2:hover:after
{
  background: green !important;
}
#div1:hover:before,#div1:hover:after
{
  background: orange; !important;
}
<div class="wrap">
                      <div class="progress">
              <div class="progress" id="div1">simple</div>
              <div class="progress" id="div2">simple</div>
            </div>
                      <div class="progress">
                        as
                      </div>
                      <div class="progress">
                        complex
                      </div>
                      <div class="progress">
                        Web Development
                      </div>
                </div>

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>   .wrap {
  width: 100%;
  height: 30px;
  z-index: -2;
  white-space: nowrap;
  overflow: hidden;
}

.wrap div:first-child {
  margin-left: -2%;
}

.progress {
  margin: 0;
  margin-left: 0.5%;
  height: 30px;
  width: 25%;
  position: relative;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  transition: all 0.8s;
}

.progress:before,
.progress:after {
  content: "";
  position: absolute;
  transition: all 0.8s;
  z-index: -1;
}

.progress:before {
  height: 50%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  transform: skew(45deg);
}

.progress:after {
  height: 50%;
  width: 100%;
  top: 50%;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  transform: skew(-45deg);
}
#div1{
width:60%;

}
#div2{
width:40%;

}

#div2:hover:before,#div2:hover:after
{
  background: green !important;
}
#div1:hover:before,#div1:hover:after
{
  background: orange; !important;
}
    <div class="wrap">
      <div class="progress">
        <div class="progress" id="div1">simple</div>
        <div class="progress" id="div2">simple</div>
      </div>
      <div class="progress">
        as
      </div>
      <div class="progress">
        complex
      </div>
      <div class="progress">
        Web Development
      </div>
    </div>

Answer №2

One option is to implement a linear gradient in your design, like this:

background: linear-gradient(90deg, rgba(0,212,255,1) 80%, rgba(0,0,0,0.2) 80%);


    .wrap {
      width: 100%;
      height: 30px;
      z-index: -2;
      white-space: nowrap;
      overflow: hidden;
    }
    
    .wrap div:first-child {
      margin-left: -2%;
    }
    
    .progress {
      margin: 0;
      margin-left: 0.5%;
      height: 30px;
      width: 25%;
      position: relative;
      display: inline-block;
      text-align: center;
      line-height: 30px;
      transition: all 0.8s;
    }
    
    .progress:before,
    .progress:after {
      content: "";
      background: linear-gradient(90deg, rgba(0,212,255,1) 80%, rgba(0,0,0,0.2) 80%);
      position: absolute;
      transition: all 0.8s;
      z-index: -1;
    }
    
    .progress:before {
      height: 50%;
      width: 100%;
      top: 0;
      left: 0;
      transform: skew(45deg);
    }
    
    .progress:after {
      height: 50%;
      width: 100%;
      top: 50%;
      left: 0;
      transform: skew(-45deg);
    }
    
    .progress:hover:before,
    .progress:hover:after {
      background: tomato;
    }
    <div class="wrap">
      <div class="progress">
        simple
      </div>
      <div class="progress">
<div style="display:inline-block;width:80%;">80%</div>
<div style="display:inline-block;width:20%;">20%</div>
      </div>
      <div class="progress">
        complex
      </div>
      <div class="progress">
        Web Development
      </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

What is the best way to enable external events for Fullcalendar in an Angular environment?

Struggling to integrate external events with Fullcalendar and Angular. Admittedly, I am new to Angular and there are aspects that still elude me. Fullcalendar provides a guide on setting up with Angular, available here. Initially, I managed to set up the ...

angulartypescriptfullcalendarfullcalendar-5

div within a fixed width container with 100% width inside

Is there a way to ensure that div B has a width of 100% when nested inside Div A, which already has a fixed width? .divA{width:600px; margin:0 auto;} .divB{width:100%; height:20px; background-color:black} .filler{height:800px; background-color:grey} ...

jqueryhtmlcss

What strategies can be implemented to decrease the value of the writing box by 2.5%?

I would like to decrease the value in the input box by 2.5%. Here is the HTML code snippet: <div class="ZakatCalc"> <div class="calcimg"> <img src="" alt="" srcset="" class=" ...

javascripthtmljquerymathdom

Tips for detaching jQuery from HTML

I have attempted multiple combinations without success. Below is my current code (all within the HTML document): <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="te ...

jqueryasp.net-mvchtml

Strategies for aligning tooltips with the locations of dragged elements

One of my projects involves a simple drag element example inspired by Angular documentation. The example features a button that can be dragged around within a container and comes with a tooltip. <div class="example-boundary"> <div ...

javascripthtmlangularangular-cdkangular-cdk-drag-drop

Arrange the columns in Angular Material Table in various directions

Is there a way to sort all columns in an Angular material table by descending order, while keeping the active column sorted in ascending order? I have been trying to achieve this using the code below: @ViewChild(MatSort) sort: MatSort; <table matSort ...

javascriptangulartypescript

Preventing Unwanted Scroll with jQuery

I'm currently working on a project where I have several description blocks that are meant to fade in when the corresponding image is clicked. The fading effect works fine, but there's an issue with the page scrolling up each time a new image is c ...

javascriptjqueryhtmlcss

Can a CSS rule be prevented from inheriting?

Currently, I have implemented this CSS rule in the body selector: body { text-align:center } However, it seems like this rule is inheriting down to all other text elements on the page. Is there a way to prevent CSS from applying this rule to other elem ...

css

Deleting an object from memory in Angular without destroying the component

I am facing a challenge with my complex Angular application as it is causing the browser to crash very quickly. Despite fixing memory leaks in every subscription, the issue persists. To optimize the app, I have resorted to using Chrome's debug module ...

angularmemory-leaksgarbage-collectioncomponents

Modify the disabled background color of the mat-form-field component in Angular version 15

Is there a way to customize the background color and outline of disabled text input in Angular 15? I attempted using mdc-text-field--disabled and overriding the outline CSS, but it had no effect. Current appearance when disabled https://i.sstatic.net/Ogu ...

angularangular-material

Tips for removing the default hover and click effects from a Material-UI CardActionArea

Check out the card sample with a lizard photo on https://material-ui.com/components/cards. When you hover over the cardActionArea, it will get darker or lighter based on the theme. Clicking on the card will make the picture change its brightness relative ...

javascriptcssreactjsmaterial-ui

The Angular client fails to receive data when the SignalR Core Hub method is called from the Controller

Issue with Angular SignalR Client not Receiving Data from ASP.NET API I have a setup where an angular website is connected to an asp.net back-end using SignalR for real-time data service. Everything was working fine when tested in localhost, but after pub ...

c#angularsignalrasp.net-core-signalr

The Mat-Timepicker is not visible after building in --prod mode

I have implemented mat-timepicker v5.1.5 successfully on my local environment. However, after building the app for production and deploying it on Tomcat server, the timepicker fails to display. No errors are shown during the build --prod command or in the ...

angularnpmproduction

Is it possible to apply CSS styling to all placeholders in a Sencha Touch application?

Having trouble figuring out how to style all the placeholders in my application with CSS. I've attempted a few different methods: .customField input::-webkit-input-placeholder { color: #2e4bc5; } .x-text-field input::webkit-input-placeholder{ c ...

csssencha-touch-2.3

Utilizing the powerful combination of TailwindCSS and Next.js Image to achieve a full height display with

Trying to utilize the Next.js' <Image> component with the layout=fill setting, I created a relative div housing the Image tag. However, I am looking for a way to set the height based on the Image's height. Came across this example, but the ...

cssnext.jstailwind-cssnextjs-image

Various inline SVG elements not rendering properly on HTML page

I have converted several PDF files to SVG using a tool called pdftocairo. These SVG files can be viewed in a browser without any issues. You can find one of the SVG files here. However, when I try to embed multiple different SVG files into the same HTML ...

htmlsvg

Check for the presence of a horizontal scrollbar on the page for both computer and mobile devices

Is there a way to determine if a web page has a horizontal scrollbar using jQuery or pure JavaScript? I need this information to dynamically change the css of another element. I initially tried function isHorizontalScrollbarEnabled() { return $(docum ...

javascriptjqueryhtmlcross-browserscrollbar

Learn the steps to refresh a component in Angular 5

src/shared.service.ts public _testData:any;   set testData(value:any) {     this._testData = value   }   get testData():any {     return this._testData;   } src/header.component.ts private postValues( ...

angulartypescriptangular5

My website footer is falling short and not reaching the bottom of the page

I've encountered an issue where my footer is not extending all the way down the website, despite trying various solutions. Here's what I attempted: I used the following CSS properties: min-height: 100%; max-height: 100%; I included these prope ...

htmlcsstwitter-bootstrapfooter

"Optimizing Angular (v4+) for Peak Performance: Expert Strategies and

Currently delving into Angular JS, I've kicked off an Angular Project through the Angular CLI with the core version standing at 5.1.0. Seeking guidance on best practices when it comes to crafting a stellar UI. Your insights and tips on the matter wou ...

angular