Kevin Powell - Community•2mo ago

how can we do it?

Is there any way of achieving this line in between as a progress using html css

16 Replies

missymae#2783•2mo ago

svg fill property?

ChooKing•2mo ago

This can be done in pure CSS without any SVG. Use a pseudoelement for the line and don't apply that to the last one.

EIO•2mo ago

Here's an almost exact replica of this I did some time ago, but in React and Tailwind. Time won't let me extract just the html and css, but it should be easy to understand, especially if you know React. And like @ChooKing said, no svg needed, just pure css with pseudo elements will give you that

steps.tsx

roger•2mo ago

https://codepen.io/rogeraman/pen/MWdaRVX

aman

CodePen

radio progress

...

roger•2mo ago

This is the code please help me

Chris Bolson•2mo ago

As chooking has suggested, I would place the pseudo element on each item rather than on the parent, leaving it off the last item. If you swap your margin for padding, you can easily make the line the height of each item. This is my test CSS (modified selectors only) based on your current code and HTML. I myself might approach this differently but that is often down to personal choice more than anything else.

.radio-progress .radio-box {
  /*margin-bottom: 20px;*/  /* remove this*/
  display: flex;
  align-items: center;
  position: relative; /* add position relative to box */
  padding-block: 1rem; /* add padding rather than margin */
}
.radio-box .form-check-label {
  margin: 0px 0px 0px 20px;
}
/* psedudo element on radio box rather than on parent*/
.radio-box::after {
  content: "";
  position: absolute;
  z-index: -1; /* ensure that it is behind the radio buttons*/
  left: 0.75rem; /* adjust to behind the radio - this could probably be calculated rather than using a magic number */
  top: 50%; /* move down 50% so that it will overlap into the next item */
  width: 1px; /* use a background rather than a border  - personal preference*/
  background: #aaa;
  height: 100%; /* full height of radio-box */
}
.radio-box:last-child::after {
  display: none; /* don't show the line on the last line */
}

.radio-progress .radio-box {
  /*margin-bottom: 20px;*/  /* remove this*/
  display: flex;
  align-items: center;
  position: relative; /* add position relative to box */
  padding-block: 1rem; /* add padding rather than margin */
}
.radio-box .form-check-label {
  margin: 0px 0px 0px 20px;
}
/* psedudo element on radio box rather than on parent*/
.radio-box::after {
  content: "";
  position: absolute;
  z-index: -1; /* ensure that it is behind the radio buttons*/
  left: 0.75rem; /* adjust to behind the radio - this could probably be calculated rather than using a magic number */
  top: 50%; /* move down 50% so that it will overlap into the next item */
  width: 1px; /* use a background rather than a border  - personal preference*/
  background: #aaa;
  height: 100%; /* full height of radio-box */
}
.radio-box:last-child::after {
  display: none; /* don't show the line on the last line */
}

querp•2mo ago

https://codepen.io/Henk-Poffertjes/pen/MWdKqYm This is how far I have gotten. It's only a hover-effect, but I wanted to practice with ::after and ::before.

Henk Poffertjes

CodePen

progress bar

...

Chris Bolson•2mo ago

I have put together an example which works according to how I think it would work according to your image: https://codepen.io/cbolson/pen/MWdKzvK

querp•2mo ago

This is beautiful! 🥳 You can do this ?!

input:checked {}

input:checked {}

The connecting lines are a tiny bit off-center on my screen, so I changed 'left' to 0.45rem.

/* joining lines */
.radio-progress > label::after {
  left: 0.5rem;
  left: 0.45rem;
}

/* joining lines */
.radio-progress > label::after {
  left: 0.5rem;
  left: 0.45rem;
}

I am having some trouble reading these selectors. Could you @Chris check if I get this right?

/* all after current checked */
.radio-progress > input:checked + label + input ~ label span {
  opacity: 0.3;
}

/* all after current checked */
.radio-progress > input:checked + label + input ~ label span {
  opacity: 0.3;
}

This selector will select; 1 - all checked inputs that are direct children of .radio-progress, 2 - the first label that is placed immediately after these input elements, 3 - the first input that is placed immediately after these label elements, 4 - every span that is a child of label that is preceded by these input elements. Is this correct?

Chris Bolson•2mo ago

I will admit that the selectors in this one are a bit complex 😛 I basically styled all the "radios" as if they were checked and then progressively "uncheck" them according to which radio is really checked. The selector that you have highlighted is selecting the span (which holds the text) contained in the first label AFTER the current label. That is to say, not the first label after the input checked but the next one. A sort of "n+2" selector. I know that it is a bit tricky to get your head round. Maybe somebody with better CSS knowledge than me can suggest a better selector. (of course this would be much simpler with JS). sorry, I was looking at the wrong selector... That one selects ALL the spans after the checked input EXCEPT for the one immediately after it and the one after that.

querp•2mo ago

Oh wow, thanks for clearing this up. This example will keep me busy for a while 😅 .

Chris Bolson•2mo ago

With any selctor the only item(s) that are actually selected is the last one defined. So with this: .radio-progress > input:checked + label + input ~ label span we are selecting spans. The other elements defined in the selector are just a means to get to this span, they themseleves are not selected. It is also worth noting that this could be simplified if I had used the radio "ids". That would require a specific selector for each radio but it's id. However I wanted to come up with a solution that would work with any number of items without having to adjust the CSS once it was set up.

querp•2mo ago

Exactly this is what I was doing wrong. I thought that by combining selectors, you add all elements together. I never combined more than 2 before. https://codepen.io/Henk-Poffertjes/pen/LYoGaPW 🥳

roger•2mo ago

Man awesome thankyou! Now I need to understand this for a day

Chris Bolson•2mo ago

Basically 3 things are happening: 1. input radio buttons replaced with psuedo elements to make them easier to manipulate and style. 2. All pseudo "radio" buttons (and labels) are styled as if checked by default. 3. Uses the sibling selector input[type=radio]:checked + ... to style the radios and labels AFTER the current checked one.

roger•2mo ago

Got it Is it possible to do it without defining the height of the line in after Because if we add text and the. Fixed line would be distorting the ui Fixed height would be bad for ui

Gaming

Programming

how can we do it?