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

Issues with maintaining the checked state of radio buttons in an Angular 4 application with Bootstrap 4

In my Angular 4 reactive form, I am struggling with the following code: <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary" *ngFor="let item of list;let i=index" > <input type="radio" name="som ...

htmlangulartypescriptbootstrap-4

Using CSS syntax to target a class within an element distinguished by its unique id

Consider the following code snippet: <div id="dogs" class="content">hello</div> <div id="frogs" class="content">hello</div> <div id="hogs" class="content">hello</div> <div id="logs" class="content">hello</div&g ...

css

A guide to changing the height of a column in Bootstrap

I've utilized Bootstrap to create features in the HTML, and I'm attempting to make each box's height consistent. Check out a screenshot of the boxes here #hr-1 { width: 100px; margin-left: 20%; } #features { background-color: #f0 ...

htmlcssflexboxbootstrap-5

Utilize UI Kit to incorporate fluid margins dynamically

How can I dynamically add internal margins between cards in a responsive layout? The following code ensures responsiveness: Large Screens display 4 Cards. Medium Screens display 3 Cards. Small Screens display 2 Cards. Micro Screens display 1 Card. &l ...

htmlcssflexboxgetuikit

The HTML output from converting Tiny MCE text content is not rendering properly on the React app's front-end

I'm currently working on a blog project using React and Material UI. In order to enable users to add posts, I've integrated a TinyMCE rich text editor onto the page. The issue arises when trying to display a specific blog post, as the content app ...

htmlreactjsmaterial-uitinymce

Eliminate any unnecessary zeros at the end of a number within AngularJS interpolation

Although there are solutions available for plain JavaScript code, unfortunately they are not applicable in this particular scenario. I have a table that needs to be populated with data. The current code snippet is as follows: <tr ng-repeat="rows in $ ...

javascripthtmlangularjs

The expansion animation for the Nextjs/React accordion box did not work as expected when utilizing tailwindcss

I am currently working on creating an animation for a collapsible box (accordion). My goal is to have the child component initially hidden with display:none. When I hover over the parent component, the child should be revealed and the dimensions of the pa ...

javascriptcssreactjsfrontendtailwind-css

What causes the behavior of <body> backgrounds to differ from that of other HTML elements?

After examining the HTML code provided: <p style="margin:100px;border:1px solid red;background-color:#dff"> Hello </p> We can observe that when rendered by the browser, it looks like this: If we were to modify the document as follows: < ...

htmlcssmargin

Issue with OpenLayers Icon not appearing on screen

I just finished creating a SpringBoot app using Spring Initializer, JPA, embedded Tomcat, Thymeleaf template engine, and packaging it as an executable JAR file. Within this app, I have integrated OpenLayers 4 library to display a map with an Icon. Howeve ...

javascripthtmlthymeleafopenlayersopenstreetmap

Angular.js does not trigger validation for input[type='date'] if only a part of the date is entered (such as just the day)

There is an input[type='date'] with no additional validation rules. The issue arises when only a portion of the date is entered (for example, just the day and month). In this case, if you enter '01/02/YYYY', it will be recognized as an ...

angularjshtmldate

AngularJS filter that retrieves only values that have an exact match

In my AngularJS application, I have a checkbox that acts as a filter: Here is the data being used: app.controller('listdata', function($scope, $http) { $scope.users = [{ "name": "pravin", "queue": [{ "number": "456", "st ...

javascripthtmlangularjsangularjs-filter

:active state not functioning correctly

I've utilized the :after and :before pseudo-elements to create a border effect when hovering over the navigation links. I've been trying to achieve the same border effect in the :active pseudo-class as well. Can someone please guide me on how to ...

htmlcss

When the parent element is centered, align the children to the left

Can children be aligned to the left when the parent is aligned to the center? I have a list of elements where the parent block should be centered, but the children need to align to the left. Now I found a solution to align the children to the center as w ...

css

How come my jQuery isn't updating the class of a specific element?

I apologize if this question seems too specific to my own project, but I am facing a dilemma. I am attempting to change the color of the title of the user's current page to orange when hovering over the page name in the navigation menu. In simpler ter ...

jqueryhtmlcssmouseoveraddclass

Link the html button with the php code in order to perform a specific action

I am looking to link my HTML code with PHP in order to achieve the following functionality: 1. Create a cookie that prevents a specific message from being displayed again when a certain button is clicked. 2. Hide messages using CSS after the button clic ...

phphtml

Turn off the scrollbar without losing the ability to scroll

Struggling with disabling the HTML scrollbar while keeping the scrolling ability and preserving the scrollbar of a text area. Check out my code here I attempted to use this CSS: html {overflow:hidden;} Although it partially worked, I'm not complete ...

javascriptjqueryhtmlcss

Displaying a variable in HTML using PHP before it's actually declared

I have a webpage named search.php My goal is to customize the title/tab tag of the page to display the number of items found along with "Mysearch". Here's what I want it to look like: <head> <title><?php echo $number_count; ?> it ...

phphtml

Ensure that when you click on the next dropdown menu opener button, the previous dropdown menu closes and only the new menu remains open

Take a look at this page first to get an understanding: On this page, I have implemented multiple dropdown menus that should open when clicked on their respective opener buttons (3 bar icon) and close either when clicked again or anywhere else on the page ...

javascripthtmlcss

Swap out a div identifier and reload the page without a full page refresh

I am interested in learning how to dynamically remove a div id upon button click and then add it back with another button click to load the associated CSS. The goal is for the page to refresh asynchronously to reflect these changes. So far, I have successf ...

javascriptjqueryhtmlcssajax

jQuery does not seem to be able to recognize the plus sign (+)

I am currently developing a calculator program and facing some challenges with the addition function. While the other functions ("/", "-", "*") are working fine, the plus ("+") operation seems to be malfunctioning. Here's the snippet of HTML and JavaS ...

javascriptjqueryhtml