Position two div elements and an hr tag to create a step progress bar

Check out my progress bar design

  1. How can I center the 'created' and 'assigned' divs below the circle while ensuring the 'hr' line touches the circle, and it is responsive across different screen sizes?
  2. Any tips on how to create a perfect circle here?

Here's the HTML:

<div class="container">
    <div   class="progress">

        <div id='content' class='filledCircle'></div>
          <div>Created</div>
            <hr class="line">
        <div id='content' class='filledCircle'></div>
          <div>Assigned</div>

    </div> 
</div>

And the CSS:

.container{
 position: relative;
 border: 3px solid mistyrose;
 margin-left: 50%;

}

.progress{
 display: flex;
}

hr.line{
 border: none;
 background: grey;
 width: 100%;
 height: 2px;
}

.filledCircle{
 height: 25px;
 width: 25px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
}

Thanks in advance for your help :)

htmlcssfrontendline

Answer №1

To improve the appearance of a circle, consider using padding instead 

.container{
 position: relative;
 border: 3px solid mistyrose;
 margin-left: 50%;

}

.progress{
 display: flex;
 align-items:center
}

hr.line{
 border: none;
 background: grey;
 width: 100%;
 height: 2px;
}

.filledCircle{
padding:15px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
}
<div class="container">
    <div   class="progress">

        <div id='content' class='filledCircle'></div>
          <div>Created</div>
            <hr class="line">
        <div id='content' class='filledCircle'></div>
          <div>Assigned</div>

    </div> 
</div>

Simply add align-items: center to your CSS and utilize padding over width and height

.progress {
   display: flex;
   align-items: center;
}

    .filledCircle {
      padding: 15px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
    }

Answer №2

.container{
 position: relative;
 border: 3px solid mistyrose;
 margin-left: 50%;

}

.progress{
 display: flex;
}

hr.line{
 border: none;
 background: grey;
 width: 100%;
 height: 2px;
}

.filledCircle{
 height: 25px;
 width: calc(25px * 2);
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
}
<div class="container">
    <div   class="progress">

        <div id='content' class='filledCircle'></div>
          <div>Developing</div>
            <hr class="line">
        <div id='content' class='filledCircle'></div>
          <div>Testing</div>

    </div> 
</div>

Answer №3

Solution:

My approach involved leveraging CSS grids to neatly organize the circle, line, and text elements within them while ensuring they are centered appropriately.

display: grid;
  grid-template-columns: [colstart]1fr  [two]1fr [three]2fr [four]1fr [five]1fr [colend];
  grid-template-rows: [rowstart]80% [rowcenter] auto[rowend];

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

Using JavaScript, you can add an article and section to your webpage

Currently, I am utilizing AJAX to showcase posts. My objective is to extract each property from a JSON object that is returned and generate an <article> for the title followed by a subsequent <section> for the content. While I can successfully ...

javascripthtmlajaxjson

Desktop Safari displays Font-awesome icons with trimmed corners using a border-radius of 50%

While working on incorporating font awesome share icons into my project, I encountered an issue with getting a circle around them. After exploring various approaches, I opted for a CSS solution. Using React FontAwesome posed some challenges that led me to ...

javascriptcssreactjsborderfont-awesome

JavaScript functions cannot be applied to input fields in jQuery

I am having trouble saving values into a database where I need to calculate the total and grand total. I want to do the calculation in the input field, but my attempts have not been successful. It seems like the issue lies with $('.multTotal',thi ...

jqueryhtml

Is it possible to activate the jQuery .click() function for a button with specific text?

Here's a dilemma I'm facing: $('.add_to_cart span:contains("Choose a Size")').click(function() { console.log("it has been clicked") }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></s ...

javascripthtmljquery

How can I create a CSS animation for a box element?

During my current project, I have the task of creating a box that will display an animation within 2 seconds and move from one corner to another. What is the most straightforward way to achieve this? ...

css

Using jQuery to Retrieve Check Box Labels and Populate Them into Textboxes

I would like to display the name of the selected checkbox label in a textbox. If multiple checkboxes are selected, I want their labels to be separated by commas and displayed in the textbox. Please excuse my poor English. $(document).ready(function() { ...

jqueryhtmlcss

Ways to move down only one level of an element's children, excluding sub-levels

When implementing this code snippet: jQuery: $(this).next().slideDown() with a selector :$(this).next() HTML: <li class="sub-menu two-level-collapse"> <a href="javascript:void(0);" class="two-level-collapse parent">< ...

javascriptjqueryhtml

Leverage the power of Next.js to dynamically render a specific section of an HTML webpage

I want to incorporate Next.js into a specific section of my website, while the rest of the site is built using different frameworks that are not even based on React. I aim to use Next.js within a <div id="nextjs_div">...</div> element ...

htmlreactjsnext.js

Combining cells for certain entries in an Angular data table

Just starting to learn angular, and here's the scenario I'm dealing with: I have a table consisting of 10 columns. Let's say column 4 contains different status categories like children, teen, young, adult, and senior. When displaying all ...

htmlsqlangulartypescript

I have exhausted all possible solutions in my attempts to eliminate the whitespace below my footer. Is there something I have overlooked or not tried yet?

After updating the CSS stylesheet, I noticed a white space below my footer. A screenshot has been included for reference. Despite including a CSS reset, the issue still persists. /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author ...

htmlcss

Having trouble accessing certain nodes while extracting HTML text with R

I have numerous water extraction permits that are accessible online and I am looking to extract specific data from them. For example url <- "https://www.ecan.govt.nz/data/consent-search/consentdetails/CRC000002.1" While I don't have a strong know ...

htmlrweb-scrapingrvest

Utilizing Jquery cycle to overlay a div on top of a scrolling image

Hey there! I'm currently using the jquery.cycle.all.js plugin for my website. I've encountered an issue where I want to position a menu div on top of an image slider. The menu is in the correct location, but unfortunately, it's hidden benea ...

jqueryhtmlcssjquery-cycle

Linked Dropdownlists Connected to a Single Dropdownlist

I am struggling to find the best way to phrase my question, but I need some help. I want to connect three dropdown lists together in a specific way. Dropdown list 2 and 3 should be disabled so the user cannot interact with them, while dropdown list 1 remai ...

htmlasp.netwebformssqldatasource

Issues with HTML structure across various devices

Being a novice in web development, I've been experimenting with creating a modal body. The code snippet below represents my attempt at structuring the modal body: <div className="row modalRowMargin textStyle" > ... Your e ...

javascripthtmlcssbootstrap-4

Enter a number into a text box and increase the value in several text boxes created with jQuery in PHP

I need to dynamically populate textboxes with student information from a database after inputting a value, for example 100, and clicking on the 'Add' button. The challenge is to incrementally assign values to each textbox based on the initial num ...

phpjqueryhtmlajax

Mastering CSS Sprites: A Guide to Aligning Sprite Buttons at the Bottom

In my web app, I have a bottom navigation bar with 9 buttons, each represented by a Sprite Image having 3 different states. The challenge I'm facing is aligning all the images at the bottom of the nav bar or div. The icons vary slightly in size, and ...

htmlcsscss-spritessprite

React Href is not functioning as expected in relative paths

Recently, I delved into React apps and managed to create one with a router. Everything was smooth sailing in dev mode until I tried running index.html from the build folder after npm run build. It seems like all the href links are broken. I suspect somethi ...

javascripthtmlreactjsreact-router

Is it possible to leverage the className attribute in Material UI components?

Currently using React alongside Material-UI(MUI) for the frontend development. Encountering an issue with the Button Component in MUI, specifically the className prop. Struggling to apply custom styles using classes defined in the style.css file. Conside ...

cssreactjsmaterial-ui

unable to see the new component in the display

Within my app component class, I am attempting to integrate a new component. I have added the selector of this new component to the main class template. `import {CountryCapitalComponent} from "./app.country"; @Component({ selector: 'app-roo ...

htmlangulartypescript

Utilizing jQuery's each() function to create a seamless loop of background images in a

Struggling with looping the background image in a slick slider? Check out the code snippet below. var json = [ { "img_url": "https://via.placeholder.com/500x500?text=1" }, { "img_url": "https://via.placeholder.com/500x500?text=2" }, { "img_url": "ht ...

javascriptjquerycss