Addressing the spacing and alignment issues within the progress bar

I need some help with my Angular app. I am currently working on creating a progress bar, but I am facing some issues with the alignment of the bars. Here is the code snippet that I have used:

CSS:

.progressbar {
  position: relative;
  height: 56px;
  margin: 5px;
  background: linear-gradient(to right, red 0%, yellow 50%, green 34%) left/var(--p, 100%) fixed, lightgray;
  box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.5);
  animation: change 1s linear infinite;
}

.progressbar:after {
  content: '';
  position: absolute;
  right: 0;
  width: 0;
  height: 0;
  border-top: 28px solid white;
  border-bottom: 28px solid white;
  border-left: 28px solid transparent;
}

.progressbar:before {
  content: '';
  position: absolute;
  left: 0;
  width: 0;
  height: 0;
  border-top: 28px solid transparent;
  border-bottom: 28px solid transparent;
  border-left: 28px solid white;
}

.bar {
  display:flex;
  gap:10px;
}

HTML:

<div class="bar">
<div class="progressbar" style="width:100%;"></div>
<div class="progressbar" style="width:100%;"></div>
<div class="progressbar" style="width:100%;"></div>

</div>

If you open the Fiddle link here, you will see the current implementation of the progress bar.

The issue lies in the fact that there is a gap between the multiple gradient bars and their alignment is not proper. I want them to be equally spaced and close to each other like the image here. How can I achieve this desired layout?

htmlcssangularbootstrap-5

Answer №1

If I were to modify my HTML code, it would look like this:

<div class="bar">
    <div class="progressbar active" style="width:100%;"></div>
    <div class="progressbar" style="width:100%;"></div>
    <div class="progressbar" style="width:100%;"></div>
</div>

Next, here's the CSS code:

.progressbar {
      height: 56px;
      background: lightgray;
      box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.5);
      animation: change 1s linear infinite;
      margin: 5px -10px;
      clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%);
    }
    .progressbar:first-child {
      margin-left: 0;
      clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
    }
    .progressbar:last-child {
      margin-right:0;
    }
    .bar {
      display:flex;
      gap:20px; /*You can now use this property to adjust the space between the bars*/
    }
    .progressbar.active{
      background: 
    linear-gradient(to right, red 0%, yellow 50%, green 34%)
      left/var(--p, 100%) fixed,
    lightgray;
      box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.5);
    }

To determine when to add the "active" class in JS based on the user's progress is a useful approach. Although there may be room for further optimization, this solution should work well with your current setup. Hopefully, you find this information helpful!

Answer №2

.bar {
    width: 80%;
    display: flex;
    justify-content: center;
    background:
            linear-gradient(to right, red 0%, yellow 50%, green 34%)
            left/var(--p, 100%) fixed,
            lightgray;
}

.progressbar {
    margin-right: 10px;
    float: left;
    z-index: 1;
    height: 56px;
}

.progressbar:after {
    content: '';
    position: absolute;
    width: 10px;
    height: 50%;
    top: 0px;
    left: 0px;
    z-index: 100;
    -webkit-transform: skewX(35deg);
    transform: skewX(35deg);
    background:
            linear-gradient(to right, white 0%, white 100%)
            left/var(--p, 100%) fixed,
            lightgray;
}

.progressbar:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 50%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 100;
    -webkit-transform: skewX(-35deg);
    transform: skewX(-35deg);
    background:
            linear-gradient(to right, white 0%, white 100%)
            left/var(--p, 100%) fixed,
            lightgray;

}

.clip {
    clip-path: polygon(0% 0%, 96% 0%, 100% 50%, 96% 100%, 0% 100%);
}

.start {
    background: white;
    margin-left: -6px;
    width: 16px!important;
    height: 33px;
    margin-top: 12px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}
    <div class="bar clip">
        <div style="width: 33.3333%; position: relative">
            <div class="progressbar start" style="width:10px;">
            </div>
        </div>
        <div style="width: 33.3333%; position: relative">
            <div class="progressbar" style="width:10px;">
            </div>
        </div>
        <div style="width: 33.3333%; position: relative">
            <div class="progressbar" style="width:10px;">
            </div>
        </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

Discovering content between HTML tags using Python Regular Expressions

Can someone help me with extracting the content between HTML tags shown here: <div class="td-wrap"> <a href="/universities/university-cambridge" class="uni-link">University of Cambridge </a> </div> ...

pythonhtmlregex

Having trouble locating the angular-devkit while trying to update Angular

I encountered the following error message: An unhandled exception occurred: Cannot find module '@angular/compiler-cli' See "C:\Users\rashe\AppData\Local\Temp\ng-s9ZG05\angular-errors.log" for further details. ...

angularnpm

Error: The NgTools_InternalApi_NG_2 member is not exported in compiler-cli/src/ngtools_api

Currently, my ng serve command is not working and showing the following error message: ERROR in node_modules/@angular/compiler-cli/index.d.ts(20,10): error TS2305: Module '"./node_modules/@angular/compiler-cli/src/ngtools_api"' has no expor ...

angularcompiler-errors

Include a tab button within a vertical tab list using Angular Material

I have utilized Angular Material to create a vertical tab, and I would like to incorporate an Add Tab button within the tab listing itself. Currently, when I add the button, it appears at the bottom of the layout instead. For reference, you can access the ...

cssangulartabsangular-materialmaterial-design

Automate the selection of an item in a Primeng Listbox using Angular 2 and PrimeNg

After displaying a list using a PrimeNg Listbox (p-listbox), I needed to monitor the changes in selection by implementing the ngDoCheck lifecycle hook. Specifically, I wanted to detect when the user selected a specific group ("Group0") and then revert the ...

angularprimengangular-forms

Following a series of Observables in Angular 2+ in a sequential order

Apologies if this question has been answered elsewhere, I attempted to search for it but I'm not exactly sure what I should be looking for. Imagine I have this complex object: userRequest: { id: number, subject: string, ... orderIds: ...

javascriptangulartypescriptrxjsobservable

Set up Angular 2 Universal on your system

Update: I attempted to set up Angular 2 Universal following this guide, but encountered errors when executing the command below. Here is the command I ran: typings install node express body-parser serve-static dexpress-serve-static-core mime --global -- ...

node.jsangularexpresswebpack-dev-server

What could be causing the reliability issue with this particular Angular JS code for dropdown menus?

Attempting to create a dynamic country-city dropdown menu using AngularJS <div> Country: </br> <select data-ng-model="country" ng-options="country.name for country in countries" data-ng-change="updateCountry(country) ...

javascripthtmlangularjsjson

Creating an overlay effect when hovering over an image

Recently, I've been working on a gallery of photos that showcases different individuals. My goal is to have information about each person displayed when their respective photo is hovered over - including their name and role. .gallery { position: ...

htmlcssoverlay

Using selenium in conjunction with python to click a unique button

Having trouble clicking the connect button on the "people you may know" page of LinkedIn () The HTML code for these buttons is: <a class="vcard-button bt-connect bt-primary" href="#"><span>&nbsp;</span>Connect</a> I attempted ...

pythoncssbuttonseleniumclick

Code snippet in webpage body

Hey there, I could really use some assistance: I currently have the following: A) Login.html B) Documentation.html C) Base.html Within the login page, there is a form with fields for User and Password. In Documentation, there are links to various folder ...

javascripthtmlcssinclude

How can the HTML email width be adjusted on Outlook 2016?

When I send out HTML emails, I encounter an issue where the content takes up the full width no matter what. I have tried adjusting the width of table, tr, td, div, and body elements, but it still persists. This problem occurs on Outlook 2016 across all W ...

htmlcssemailoutlookoutlook-2016

What is the best way to set the background opacity to 0.7 without impacting the content within it?

Currently, I'm facing an issue with two divs - the outer one is identified as "BD" and the inner one as "content". Whenever I attempt to reduce the opacity of BD's background-color, the content inside also becomes less opaque including both image ...

htmlcss

Using AngularJS, passing a value from outside a directive to the directive and detecting changes in the

As a newcomer to AngularJs, I am facing a challenge in retrieving data from outside a directive. The scenario involves multiple input fields being updated and the necessity for the directive to process this information. For instance, consider the code sni ...

javascripthtmlangularjsangularjs-directive

Choosing an option from a PHP MySQL table based on a JavaScript value

I am attempting to create a select box that displays a value based on whether the database has a "yes" or "no" in the specified column. Despite my efforts, I am unable to identify any syntax errors causing this code snippet to not function properly. JavaSc ...

javascriptphphtmlmysql

What steps are needed to develop a proper HTML structure for this specific box in order to achieve the desired aesthetics?

Currently working on a box that includes various tags and an input field for adding new tags. The goal is to make this box resemble the tag form used on YouTube: https://i.stack.imgur.com/RSj2p.png This particular layout features a box with existing tags ...

htmlcsslayout

What is the importance of using ChangeDetectorRef.detectChanges() in Angular when integrating with Stripe?

Currently learning about integrating stripe elements with Angular and I'm intrigued by the use of the onChange method that calls detectChanges() at the end. The onChange function acts as an event listener for the stripe card, checking for errors upon ...

javascriptangulartypescriptstripe-payments

Exploring the Use of throwError in Angular 7 with RxJs 6.x

I'm having trouble using the second parameter (error) in my subscriber, it doesn't seem to be working properly. Here is the code for my Observable: return Observable.create(obs => { cognitoidentityserviceprovider.adminCreateUser(params, fu ...

angularrxjs6

Modifying the appearance of the search box

I'm looking to customize the appearance of my search box. On Stack Overflow, you'll notice the search box is a perfect rectangle. I want mine to have rounded edges, like an ellipse, rather than being rectangular. How can I achieve this look? Than ...

htmlcss

Postback does not reload all controls in the NameValueCollection

Recently, I designed a custom User Control in asp.net. public class InputMask : CompositeControl, IPostBackDataHandler, IPostBackEventHandler Imagine the custom control is enclosed within a div element: <div runat="server" id="inputArea"> < ...

c#cssasp.netcustom-controls