Incorporate a curved progress line into the progress bar

Currently, I am working on creating a customized progress bar:

.create-progress-bar {
    padding: 0 !important;
    margin: 25px 0;
    display: flex;
}

.create-progress-bar li {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    position: relative;
    width: 33.3333333333%;
}

.create-progress-bar .step-inner-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.create-progress-bar li span.step-title {
    text-transform: uppercase;
    font-weight: 600;
}

.create-progress-bar li span.step-icon {
    font-size: 22px;
    padding: 18px;
    border: 3px solid;
    border-radius: 100%;
    margin-bottom: 6px;
    font-weight: 600;
    width: 26px;
    text-align: center;
}

.create-progress-bar li:first-child {
    align-items: flex-start;
}

.create-progress-bar li:nth-child(2) {
    align-items: center;
}

.create-progress-bar li:last-child {
    align-items: flex-end;
}

.create-progress-bar li::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background: #666666;
    border-radius: 3px;
    top: 31px;
    left: -50%;
    z-index: -1;
}
<ul class="create-progress-bar">
    <li class="active">
        <span class="step-inner-wrapper">
            <span class="step-icon">✔</span>
            <span class="step-title">Create</span>
        </span>
    </li>
    <li>
        <span class="step-inner-wrapper">
            <span class="step-icon">✔</span>
            <span class="step-title">Check</span>
        </span>
    </li>
    <li>
        <span class="step-inner-wrapper">
            <span class="step-icon">✔</span>
            <span class="step-title">Done</span>
        </span>
    </li>
</ul>

However, I am facing an issue in styling the progress bars between each element. I want it to look like this based on the active class in each li element:

https://i.sstatic.net/pjUmI.png

If anyone has any suggestions or ideas on how to achieve this, please let me know!

htmlcss

Answer №1

To achieve this effect, you can utilize flexbox along with the :before pseudo-elements. By adding a line before each li element, except the first one, and applying border and line color changes to li elements with an active class, you can create a visually appealing design.

ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 50px;
}

li:not(:first-child) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

li:not(:first-child):before {
  flex: 1;
  height: 1px;
  background: black;
  content: '';
  margin: 0 10px;
}

li.active .step-inner-wrapper {
  border-color: red;
  color: red;
}

li.active:before {
  background: red;
}

.step-inner-wrapper {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
}

.step-title {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
}
<ul class="create-progress-bar">
  <li class="active">
    <span class="step-inner-wrapper">
      <span class="step-icon">✔</span>
    <span class="step-title">Create</span>
    </span>
  </li>

  <li>
    <span class="step-inner-wrapper">
      <span class="step-icon">✔</span>
    <span class="step-title">Check</span>
    </span>
  </li>

  <li>
    <span class="step-inner-wrapper">
      <span class="step-icon">✔</span>
    <span class="step-title">Done</span>
    </span>
  </li>
</ul>

<ul class="create-progress-bar">
  <li class="active">
    <span class="step-inner-wrapper">
      <span class="step-icon">✔</span>
    <span class="step-title">Create</span>
    </span>
  </li>

  <li class="active">
    <span class="step-inner-wrapper">
      <span class="step-icon">✔</span>
    <span class="step-title">Check</span>
    </span>
  </li>

  <li class="active">
    <span class="step-inner-wrapper">
      <span class="step-icon">✔</span>
    <span class="step-title">Check</span>
    </span>
  </li>

  <li>
    <span class="step-inner-wrapper">
      <span class="step-icon">✔</span>
    <span class="step-title">Check</span>
    </span>
  </li>

  <li>
    <span class="step-inner-wrapper">
      <span class="step-icon">✔</span>
    <span class="step-title">Done</span>
    </span>
  </li>
</ul>

Answer №2

After completely revamping your CSS and making some minor adjustments to the HTML structure, I have created a new version. Check out my updated fiddle:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.progress-bar {
  display: flex;
  width: 100%;
  justify-content: space-around;
  flex-flow: row;
  align-items: center;
  max-width: calc(100% - 40px);
  margin: 0 auto;
}

.progress-bar>li:first-child {
  width: auto;
}

.progress-bar>li:first-child .line {
  display: none;
}

.progress-bar>li.active .tick {
  border-color: red;
  color: red;
}

.progress-bar>li.active .line {
  background: red;
}

.progress-bar>li {
  display: flex;
  flex-flow: row;
  width: 100%;
  align-items: center;
}

.tick {
  border-radius: 100%;
  border: 5px solid black;
  height: 30px;
  width: 30px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  position: relative;
}

.tick>span {
  position: absolute;
  top: 70px;
}

.line {
  width: 100%;
  height: 5px;
  display: block;
  background: black;
  margin: 0 15px;
}
<ul class="progress-bar">
  <li class="active">
    <div class="line"></div>
    <div class="tick">
      ✔<span>CREATE</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔<span>CHECK</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔<span>DONE</span>
    </div>
  </li>
</ul>

I decided to eliminate the use of pseudo-classes like ::after, opting instead for a div.line. In the CSS, I removed the first progress line by setting it to display: none rather than removing the div element itself. This approach is more dynamic as you don't need to worry about manually removing the first line when adding content dynamically. You can also see this alternate version here:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.progress-bar {
  display: flex;
  width: 100%;
  justify-content: space-around;
  flex-flow: row;
  align-items: center;
  max-width: calc(100% - 40px);
  margin: 0 auto;
}

.progress-bar>li:first-child {
  width: auto;
}

.progress-bar>li.active .tick {
  border-color: red;
  color: red;
}

.progress-bar>li.active .line {
  background: red;
}

.progress-bar>li {
  display: flex;
  flex-flow: row;
  width: 100%;
  align-items: center;
}

.tick {
  border-radius: 100%;
  border: 5px solid black;
  height: 30px;
  width: 30px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  position: relative;
}

.tick>span {
  position: absolute;
  top: 70px;
}

.line {
  width: 100%;
  height: 5px;
  display: block;
  background: black;
  margin: 0 15px;
}
<ul class="progress-bar">
  <li class="active">
    <div class="tick">
      ✔<span>CREATE</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔<span>CHECK</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔<span>DONE</span>
    </div>
  </li>
</ul>

Edit #1

Following feedback from the comments, here is an updated version with soft hyphens:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.progress-bar {
  display: flex;
  width: 100%;
  justify-content: space-around;
  flex-flow: row;
  align-items: center;
  max-width: calc(100% - 40px);
  margin: 0 auto;
}

.progress-bar>li:first-child {
  width: auto;
}

.progress-bar>li.active .tick {
  border-color: red;
  color: red;
}

.progress-bar>li.active .line {
  background: red;
}

.progress-bar>li {
  display: flex;
  flex-flow: row;
  width: 100%;
  align-items: center;
}

.tick {
  border-radius: 100%;
  border: 5px solid black;
  height: 30px;
  width: 30px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  position: relative;
}

.tick>span {
  position: absolute;
  top: 70px;
  max-width: 100px;
  text-align: center;
}

.line {
  width: 100%;
  height: 5px;
  display: block;
  background: black;
  margin: 0 15px;
}
<ul class="progress-bar">
  <li class="active">
    <div class="tick">
      ✔<span>CREATE&shy;VERY&shy;LONG&shy;TEXT</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔<span>CHECK</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔<span>DONE</span>
    </div>
  </li>
</ul>

In case you prefer not to use dashes (-), simply add word-wrap: break-word;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.progress-bar {
  display: flex;
  width: 100%;
  justify-content: space-around;
  flex-flow: row;
  align-items: center;
  max-width: calc(100% - 40px);
  margin: 0 auto;
}

.progress-bar>li:first-child {
  width: auto;
}

.progress-bar>li.active .tick {
  border-color: red;
  color: red;
}

.progress-bar>li.active .line {
  background: red;
}

.progress-bar>li {
  display: flex;
  flex-flow: row;
  width: 100%;
  align-items: center;
}

.tick {
  border-radius: 100%;
  border: 5px solid black;
  height: 30px; 
  width: 30px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  position: relative;
}

.tick>span {
  position: absolute;
  top: 70px;
  max-width: 100px;
  text-align: center;
  word-wrap: break-word;
}

.line {
  width: 100%;
  height: 5px;
  display: block;
  background: black;
  margin: 0 15px;
}
<ul class="progress-bar">
  <li class="active">
    <div class="tick">
      ✔<span>CREATEVERYLONGTEXT</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔<span>CHECK</span>
    </div>
  </li>
  <li>
    <div class="line"></div>
    <div class="tick">
      ✔<span>DONE</span>
    </div>
  </li>
</ul>

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

The table refuses to load

I've been troubleshooting this issue for the past two days. The array is visible in the console, but it refuses to show up on the table. I've tried multiple approaches, but none seem to work. I suspect that "tobodyHtml" is not defined properly, a ...

javascripthtmlajax

I'm having issues getting my fancybox to display properly

HTML: <!--gallery--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script> !window.jQuery && document.write('<script src="jquery-1.4.3. ...

htmlcssfancybox

Fixed header in a table designed using HTML and Bootstrap framework

Currently, I am facing a challenge with an HTML bootstrap table that contains over 15 columns. I have enabled overflow auto to enable both vertical and horizontal scrolling. However, I am having difficulty fixing the header part because the table width exc ...

htmltwitter-bootstrap-3html-tablebootstrap-4

What steps do I need to follow to change the background color to white for the <App/> component in solid-js?

In my solid-js application styled with tailwindcss, I established a gray color in the index.css for the background of various screens. However, I wanted the main <App/> component to have a white background instead. To achieve this, I created an App.c ...

csstailwind-csssolid-js

Creating a div that automatically resizes to fit a specific width, with excess content wrapping to the next row

In our project, we currently have a design with 4 div elements arranged in two rows and two columns. However, the client has requested that we allow for multiple div elements within a container that spans 100% width. The inner divs should adjust to fit si ...

htmlcss

Please be aware that the website's loading speed may be slower than usual

Is it possible to notify a user that the website may take longer to load due to their slower internet connection? For example: Attention! It appears that the page is loading slowly because of your connection speed. Please be patient while the websi ...

htmlperformanceloadingalertpagespeed

Guide on breaking a th tag as a line in a table using CSS

I'm attempting to achieve jQuery datatable-style responsiveness in an Angular table child component. I managed to separate the td and th separately using absolute and relative positions but encountered an issue where the th tag is not breaking at the ...

htmlcssangularbootstrap-5

Unlocking the potential of Object[value] in JavaScript/jQuery: A guide to extracting its value

I have a table named 'mytable' with the following structure: <tr> <td><input type="checkbox" name="check[]" value="11"></td> <td>11</td> <td>2014-11-06 18:49:26</td> < ...

javascriptjqueryhtml

Can one determine if a webpage is being displayed within an Infragistics igDialog?

Occasionally, my web page is displayed without a container and other times it's embedded within an igDialog of another container page, based on the user's navigation throughout our web application. Is there a way, using pure javascript or jQuery ...

javascriptjqueryhtmlinfragisticsignite-ui

AngularJS: ng-show causing flickering issue upon page refresh

Recently, I encountered an issue with my code snippet: <body> <ng-view></ng-view> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/ ...

javascripthtmlcssangularjs

In relation to User Interface: Analyzing target tracking and studying the flow of time

Is there a way to track mouse cursor movements, button clicks, and click times to an external database using only CSS, HTML5, and Javascript? I am curious about the possibility of conducting usability studies in this manner. ...

javascriptcsshtmltrackingusability

Avoid repetitive comment form submissions

I have a comment form for my article and I want to prevent re-submission. Wordpress handles this well without causing the browser to request a form re-submission. However, I can't figure out how they do it even though our methods are similar. My Appr ...

phphtmlformshttp-redirect

Adjust the value based on selection

I aim to display another div when either the Full Time or Part Time option is selected. Additionally, I would like to calculate a different value for each option; if 'Part Time' is chosen, PrcA should change to PrcB. Here is the code snippet tha ...

javascripthtmlfunctionselect

Storing Form Data in MySQL, upon clicking the submit button the user is redirected to a PHP page and the information is not

Currently, I am facing an issue with injecting data into my SQL table. Whenever I input information into the forms and click on the submit button, the page redirects me to my PHP file without actually injecting any data. The tables remain empty. Below is ...

phpjqueryhtmlmysqlforms

Ensure that the left div spans 100% of the width of the container, while the right div remains on the right side and maintains a

Is there a way to create an effect with a div where the left side is 100% and the right side stays fixed? <!DOCTYPE html> <html> <style> .left { width: 100%; float: left; border: #ccc solid 1px; } .right { width: 50px; float:left; border ...

csshtml

Dynamic Font Formatting in Rails Table Based on Conditions

I need to customize the font color of dynamic values based on the state_id. If incident.state_id = 1, the font should be red; if incident.state_id = 2, it should be yellow; and if incident.state_id = 3, it should be green. incident.state_id = 1 : state.na ...

javascriptcssruby-on-railscoffeescript

Tips for concealing password input in an HTML form

Is it possible to echo the password variable into an input field in a form without displaying any password characters in the HTML source code? The purpose is for the form to be able to post the password without revealing it. Any ideas on how to accomplis ...

phphtmlformspasswords

Adjust the display from none to block when the parent element is set to flex

JSFiddle Demo Issue with - .popupcard_first:hover .popupcard_first { display: block; } I am trying to link the :hover effect to the first card only, but the only way I could make it work is by changing .popupcard... to .featured_cards:hover .po ...

htmlcssflexbox

Using canvas to smoothly transition an object from one point to another along a curved path

As a beginner in working with canvas, I am facing a challenge of moving an object from one fixed coordinate to another using an arc. While referring to the code example of a solar system on https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutori ...

javascripthtmlcanvas

Creating your own unique CSS animation or transition timing function is a great way to add a

When it comes to CSS timing functions, they often appear to exist between two specific points: https://i.stack.imgur.com/qyvON.png Even with the option of using custom bezier curves, the curve created can only transition from one point to another. https ...

cssanimationcss-transitionscss-animationseasing-functions