1

I am working on an angular app. I am making a progress bar in it. My code is as follows:

CSS:

.progressbar {
  position: relative; /* for position absolute of pseudo element work */
  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; /* Your background color*/
  border-bottom: 28px solid white; /* Your background color*/
  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; /* Your background color*/
}

.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>

My Fiddle is as follows:

http://jsfiddle.net/9hL0nb4a/9/

Problem in my code is this I am making a progress bar combining multiple gradient bar. Because of which there is a gap between them and alignment is not proper.

I want to make bars of this progress bar equally spaced and close to each other as shown in below image progress_bar

How can I do that?

Romio
  • 53
  • 4
  • Your problem is the gap in the bar class should not exist. The gap is putting gaps between your bars. Then the margin in you progressbar class should also not exist. Now your progress rectangles are against each other. Now you just need to decrease the size of those trangles your make between them then you are good to go. – Franco Nov 10 '22 at 18:11
  • use clip-path for the shape – Temani Afif Nov 10 '22 at 19:34

2 Answers2

0

.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>
Hemant Singh Yadav
  • 102
  • 3
  • Hi Hemant, Could you see my fiddle. I want only that progress bar close to each other. This :before and :after divide bar horizontally which I don't want because I may have many colors in a bar at runtime, so I want to divide bar only horizontally – Romio Nov 11 '22 at 13:19
  • Hi @Romio I made a effort to provide you with the outcome you desired. Please check as I updated the CSS. Refactoring might be possible. I hope it helps you. Do let me know. – Hemant Singh Yadav Nov 13 '22 at 02:31
  • is it possible to get same output which you gave now without using :after and :before? – Romio Nov 13 '22 at 09:43
  • As per my knowledge it would be hard to make this type of structure without using that so may be you have to work around with this only. – Hemant Singh Yadav Nov 13 '22 at 14:52
  • can you try with mario solution to get that shape. He is not using :after and :before? – Romio Nov 13 '22 at 16:19
0

I would change my html code to 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>

Then the CSS:

.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 use now this property to play with the separation 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);
    }

With JS you can add the class "active" depending on which step the user is in. The code can be optimized overall, but this can be a quick solution to what you have right there. I hope it helps!

Mario Vicuña
  • 1
  • 3
  • but in you code bar are not coming close to each other as I shown in image. Is it possible to bring them much closer? – Romio Nov 11 '22 at 03:20
  • Done! I just edited the code to a much cleaner approach using clip-path, now you can have it as much closer as you want. The gap now is 5%. You can adjust it by editing the 95% and 5% values, always keeping in mind to get both with 100% in total. – Mario Vicuña Nov 11 '22 at 05:35
  • hi just tried your new code. It is messed up i think. It is not working correclty. It has merged all the bars – Romio Nov 11 '22 at 06:51
  • I want almost exact gap as shown in image between the bars – Romio Nov 11 '22 at 06:53
  • Hi Request you to please help. I am not able to understand your updated code as well as It is giving single progress bar – Romio Nov 11 '22 at 13:19
  • I just want alll the 3-4 bar close to each other with little gap as shown in attached image – Romio Nov 11 '22 at 13:20
  • Hi @Romio, I just update it and added an important comment in the code. Hope it works now! I forgot to add the "active" class, so maybe that's why you didn't see the gradient. Now you can play with the gap property to make the separation. – Mario Vicuña Nov 12 '22 at 06:31
  • I tested it. Space wise it is fine now but arrows are not in proper shape. I am not much aware about clip property you used to create arrow shape. Could you please correct arrow shape? – Romio Nov 12 '22 at 10:56
  • HI Mario. your solution fits very near to what I require. Just shape of arrows is not according to what I required. Could you please look at attached image and correct shape of arrows in your solution. ? – Romio Nov 13 '22 at 09:39