Completely adaptable progress bar that adjusts to any screen size

I need to develop a responsive progress bar that adjusts its width dynamically. However, when I set the width to auto, the progress bar line becomes detached from the stars. How can I resolve this issue and make the progress bar responsive on mobile devices, with the line of progress being vertical?

Progress Bar with Fixed Width: https://i.stack.imgur.com/n3yu7.png

Progress Bar with Auto Width: https://i.stack.imgur.com/zs2KF.png

.progress-bar {
  width: 750px;
  display: flex;
  margin: 40px 0;
}

.progress-bar .step {
  text-align: center;
  width: 100%;
}

.progress-bar .step .bullet {
  position: relative;
  height: 25px;
  width: 25px;
  display: inline-block;
}

.progress-bar .step:last-child .bullet:before,
.progress-bar .step:last-child .bullet::after {
  display: none;
}

.progress-bar .step .bullet:before,
.progress-bar .step .bullet::after {
  position: absolute;
  content: "";
  height: 3px;
  right: -136px;
  bottom: 11px;
  width: 142px;
  background: #C1C1C1;
}

.active-bullet {
  z-index: 1;
}

.active-check {
  z-index: 2;
}
<div class="progress-bar">
  <div class="step">

    <div class="bullet active-bullet">
      <img src="star-pb-active.svg">
    </div>
    <div class="check active-check" style="
            border-bottom: 2px solid black;
            padding: 2px;
            DISPLAY: table-cell;
            LEFT: 40px;
            POSITION: relative;
        ">Order placed</div>
  </div>
  <div class="step">

    <div class="bullet">
      <img src="star-pb.svg">
    </div>
    <div class="check">Jewelry Creation</div>
  </div>
  <div class="step">

    <div class="bullet">
      <img src="star-pb.svg">
    </div>
    <div class="check">Packing & Quality Control</div>
  </div>
  <div class="step">

    <div class="bullet">
      <img src="star-pb.svg">
    </div>
    <div class="check">Shipped</div>
  </div>
  <div class="step">

    <div class="bullet">
      <img src="star-pb.svg">
    </div>
    <div class="check">Estimated Delivery</div>
  </div>
</div>

htmlcssflexboxresponsive

Answer №1

For a solution, consider exploring the flex-grow attribute in Flexbox. When you apply display: flex to the parent element and set flex-grow: 1 for each child element, you can achieve equal sizing for all elements and have them fill the width of their container.

Answer №2

It operates based on your preferences, whether in fixed or auto width.

.progress-bar {
  width: auto;
  display: flex;
  margin: 40px 0;
}

.progress-bar .step {
  text-align: center;
  position: relative;
  isolation: isolate;
  width: 100%;
}

.progress-bar .step::after {
  content: "";
  position: absolute;
  z-index: -1;
  height: 3px;
  top: 12px;  /* 1/2 of .bullet's height */
  width: 100%;
  background: #C1C1C1;
}

.progress-bar .step:last-child::after {
  display: none;
}

.progress-bar .step .bullet {
  position: relative;
  height: 25px;
  width: 25px;
  display: inline-block;
}

.active-bullet {
  z-index: 1;
}

.active-check {
  z-index: 2;
}

Introduced a pseudo element to the parent of .bullet. You can also remove ::before, as one of those pseudo elements is sufficient.

Answer №3

Implement the following code to clarify any confusion in your existing code:

  1. Utilize flex properties in CSS
  2. Add a button in the sample code to progress to the next step of your activity
  3. This code is fully responsive - displaying horizontally on desktop and vertically on mobile devices.
  4. Minimal usage of JavaScript, CSS, and Font Awesome JS for tick icon. Feel free to ask any questions in the comments section below.

let step = 'step1';

const step1 = document.getElementById('step1');
const step2 = document.getElementById('step2');
const step3 = document.getElementById('step3');
const step4 = document.getElementById('step4');

function next() {
  // Code for progressing through steps
}
.progress-bar {
  // CSS styles for progress bar
}

@media screen and (max-width:700px) {
    // Additional styles for smaller screens
}
// More CSS styles for progress bar

@keyframes pulse {
  // Animation keyframes for pulse effect
}
@keyframes nextStep {
  // Animation keyframes for next step transition
}
.container {
  // Container styling
}
button {
  // Button styles
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://use.fontawesome.com/c47bc38e87.js"></script>
<div class="container">
  <div class="progress-bar">
    // HTML markup for progress bar with steps
  </div>

  <button onClick=next()>Next Step</button>
</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

Video background with alternate image for touchscreen devices

Check out this website! The background video is functional on desktops. On smaller screens, an image is shown instead using CSS display property. However, what should be done for touch screens like iPads, which are not exactly small? Here's the code ...

htmlcssvideotabletfallback

Is there a way for me to extract the content from a table within an HTML document?

My goal is to extract data from , specifically focusing on the placement and points earned by a specific player. Upon inspecting the HTML code of the website, I located the details related to the player "Nickmercs" as follows: HTML Text The rank was displ ...

pythonhtmlweb-scraping

Tips on incorporating FORM elements with tables and ensuring that data submitted through $_POST method is successfully posted

Recently, I have been encountering an issue with a simple FORM on my website. Whenever I press the SUBMIT button, nothing happens - the form seems to activate but no $_POST variables are being received. echo "<hr>1aa<br />\n"; ...

phphtmlformshttp-post

Is it possible to add file content to the beginning rather than the end?

Looking for help with my form that allows staff to submit messages to our updates page. I currently have this code: $filename = "files/armaupdates"; $text = $_POST['update']; $updatesep = "<hr><br><hr><br>"; $fp = fopen ...

phphtml

Unable to examine a specific component

As I attempt to inspect an element by right-clicking and selecting "Inspect," I encounter the following details: Screenshot1 Screenshot2 Despite trying the code snippet below, it did not yield the desired results for me: driver.findElement(By.id("tmsMo ...

htmlseleniumtesting

variations in menu functionality on firefox

Could you please take a look at the links below? It appears that there may be an issue with FireFox. The green top menu seems to be displaying incorrectly. In Chrome/IE, it appears in one line, but in FF, the last two links are on the second line despite s ...

htmlcss

Attempting to determine income in JavaScript with the inclusion of two distinct rates

Trying to come up with a salary calculation for different rates within the same timeframe is proving to be quite challenging. For instance, between 10:00-15:00 the rate is $20 per hour and from 15:00 onwards it drops to $15 per hour. Check out the entire ...

javascripthtmlreactjs

If a specific class is identified, add a border to the div when clicked using JavaScript

Is there a way to use javascript/jquery to add a border to a selected div? I have multiple rows with columns, and I want only one column per row to be highlighted with a border when clicked. Each row should have one column with a border, so it's clear ...

javascriptjquerycssborderaddition

What is the best way to create a strip within an oval using CSS to achieve a partially filled vertical vessel effect?

I need to create an oval shape with a strip inside to represent the level of liquid volume. Here is my initial attempt: <style scoped> .strip:before { position: absolute; background: #343434; border-bottom: 2px solid black; content: ""; ...

css

Adjust the size of a menu by modifying its width

Hey everyone, I recently joined this website and I'm still learning how to code. My current project involves creating an off-canvas menu, but I've come across a few challenges. Firstly, does anyone know how to adjust the width of the menu when it ...

htmlcssmenuoff-canvas-menu

Is there a way to prevent this picture from shifting?

I am currently revamping the content on my work website using Joomla. I have received the old copy and now I need to enhance it. The website in question is 24x7cloud.co.uk. At the bottom of the page, I aim to include an "Accreditation's" section. Howe ...

phphtmlcssweb

Having trouble loading my app.js in Angular - Seeking help on Coursera!

I've followed the instructions provided thus far and inserted the HTML code accordingly. However, upon attempting to load the page, all I see is: The tabs: The Menu Appetizers Mains Desserts The description: image: dish.name , dish.name , dish.labe ...

javascripthtmlangularjs

Refresh Form (Reactive Forms)

This is the HTML code snippet: <div class="container"> <ng-template [ngIf]="userIsAuthenticated"> <form [formGroup]='form' name="test"> <div class="form-group"> <input type="text" class="form-contr ...

javascripthtmlangular

There seems to be a lack of information appearing on the table

I decided to challenge myself by creating a simple test project to dive into Angular concepts such as CRUD functions, utilizing ngFor, and understanding HttpClient methods (specifically get and post). After creating a Firebase database with an API key and ...

htmlangulartypescriptfirebaseangular-httpclient

Is there a way to increase the total of each row by two when a button is clicked?

Looking to enhance the sum of each row by two depending on whether a button is clicked. HTML: <table> <tr> <td> <input type="checkbox" class="prof" name="prof" value="0"> <input class=&quo ...

javascripthtmljquerybuttonsum

Tips for positioning slideshow below header in web design

I am currently working on enhancing the slideshow feature on my website. If you take a look at the image link provided below, you'll notice that the alignment of the slideshow is slightly off on both sides. Despite my attempts to adjust the CSS width ...

htmlcss

Say goodbye to <!DOCTYPE html> when using htmlAgilityPack

I'm currently developing an app for WP 8.1, and one of the tasks I need to accomplish is parsing a webpage with the following structure: <!DOCTYPE html> <html> <body> <table cellspacing="0" cellpadding="0" border="0" style="b ...

c#htmldomhtml-agility-packwindows-phone-8.1

The form contains an HTML table, but unfortunately, the buttons are not functioning as expected

I have encountered an issue with my form and table setup that I cannot seem to resolve. Despite researching similar problems, I have not been able to find a solution. In the code snippet provided below, you can see that when I click on the buttons for De ...

phphtmlformshtml-table

What is the best way to ensure that a component remains the highest layer on a react-leaflet map?

I am encountering an issue where the table on my page only shows for a brief second when I refresh the page, and then it disappears. The Map Component being used is a react-leaflet map. I would like to have a component always displayed on top of the map wi ...

javascriptcssreactjsreact-leaflet

When using jQuery to enable contenthover on divs, they will now start a new line instead of

I've been working on achieving a layout similar to this, with the contenthover script in action: Mockup Draft Of Desired Look However, the result I'm getting is different from what I expected, it can be seen here. The images are not aligning co ...

javascriptjquerycss