Creating CSS3 Circles connected by lines

creating css circles connected by lines to middle main circle
circles connected by lines bootstrap
css circle with horizontal line
horizontal line with dots css
vertical line with dots css
line with circle at end
css line with rounded ends
css perfect circle

I have to implement the following circle and line combination in CSS and I am looking for pointers on how to implement this effectively. The circles and lines should look like this:

I am able to implement the circles as such:

span.step {
  background: #ccc;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #1f79cd;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 5px;
  text-align: center;
  width: 1.6em; 

but the lines are tricky for me to understand.

The size of the circle changes depending on whether it is the active step or not, and the color of the line connecting the circles changes as well depending on status. How would I accomplish this?

You can achieve this effect with no additional markup using pseudo-elements and the adjacent sibling selector (~):

li {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  border-radius: 1em;
  background: dodgerblue;
  margin: 0 1em;
  display: inline-block;
  color: white;
  position: relative;

  content: '';
  position: absolute;
  top: .9em;
  left: -4em;
  width: 4em;
  height: .2em;
  background: dodgerblue;
  z-index: -1;

li:first-child::before {
  display: none;

.active {
  background: dodgerblue;

.active ~ li {
  background: lightblue;

.active ~ li::before {
  background: lightblue;
  <li class="active">4</li>

Creating CSS3 Circles connected by lines - css - html, I have to implement the following circle and line combination in CSS and I am looking for pointers on how to implement this effectively. The circles and lines  To create a circle, use the border-radius property and set the value to 50%. Then combine the height and width properties with a matching value:

Responsive circles connected by a line, Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor. CSS3 Horizontally Connected Circles. Private fiddle line-height: 26px;​. 5. with - Creating CSS3 Circles connected by lines line with circle at end (7) Working off of the excellent answer from @bookcasey I found myself doing it the opposite way to get it responsive;

Though this is possible with CSS3, I think SVG is a better tool for sophisticated interfaces.

I made this with SVG (styled with CSS):

And here's a Plunk to demonstrate.

CSS3 Horizontally Connected Circles - JSFiddle, Take a class in HTML and CSS. Hire a consultant. Seriously, your request is too vague. It would be very helpful to know where this vertical line will be used on a  Making circles with CSS is very simple. Just make the radius half of the width and height of the element to make a perfect circle, or simply use: border-radius:50% Responsive Circle With or Without Text Inside. Narrow your browser window horizontally to test the circle’s responsiveness.

It is not my own but it works quite well and looks elegant, only works with css and you can perzonalize it more. Source

var i = 1;
$('.progress .circle').removeClass().addClass('circle');
$('.progress .bar').removeClass().addClass('bar');
setInterval(function () {
    $('.progress .circle:nth-of-type(' + i + ')').addClass('active');
    $('.progress .circle:nth-of-type(' + (i - 1) + ')').removeClass('active').addClass('done');
    $('.progress .circle:nth-of-type(' + (i - 1) + ') .label').html('&#10003;');
    $('.progress .bar:nth-of-type(' + (i - 1) + ')').addClass('active');
    $('.progress .bar:nth-of-type(' + (i - 2) + ')').removeClass('active').addClass('done');
    if (i == 8) {
        $('.progress .circle').removeClass().addClass('circle');
        $('.progress .bar').removeClass().addClass('bar');
        i = 1;
}, 1000);
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans";
/* Form Progress */

.progress {

  margin: 20px auto;
  text-align: center;
  padding-bottom: 80px;
.progress .circle,
.progress .bar {
  display: inline-block;
  background: #fff;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  border: 1px solid #d5d5da;
.progress .bar {
  position: relative;
  width: 80px;
  height: 6px;
  margin: 0 -5px 17px -5px;
  border-left: none;
  border-right: none;
  border-radius: 0;
.progress .circle .label {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 32px;
  margin-top: 3px;
  color: #b5b5ba;
  font-size: 17px;
.progress .circle .title {
  color: #b5b5ba;
  font-size: 13px;
  line-height: 18px;
  margin-left: -30px;
  display: block;
  width: 100px;
  margin-top: 5px;
/* Done / Active */

.progress .bar.done,
.progress .circle.done {
  background: #eee;
.progress {
  background: linear-gradient(to right, #EEE 40%, #FFF 60%);
.progress .circle.done .label {
  color: #FFF;
  background: #8bc435;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
.progress .circle.done .title {
  color: #444;
.progress .label {
  color: #FFF;
  background: #0c95be;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
.progress .title {
  color: #0c95be;
<script src=""></script>
<link href='' rel='stylesheet' type='text/css'>
<div class="progress">
  <div class="circle done"> <span class="label">1</span>
    <span class="title">Order</span>

  </div> <span class="bar done"></span>

  <div class="circle done"> <span class="label">2</span>
    <span class="title">Address</span>

  </div> <span class="bar active"></span>

  <div class="circle active"> <span class="label">3</span>
    <span class="title">Payment</span>

  </div> <span class="bar"></span>

  <div class="circle"> <span class="label">4</span>
    <span class="title">Review</span>

  </div> <span class="bar"></span>

  <div class="circle"> <span class="label">5</span>
    <span class="title">Finish</span>

<div class="progress">
  <div class="circle done"> <span class="label">1</span>
    <span class="title">Order informations</span>

  </div> <span class="bar active"></span>

  <div class="circle active"> <span class="label">2</span>
    <span class="title">Order review</span>

  </div> <span class="bar"></span>

  <div class="circle"> <span class="label">3</span>
    <span class="title">Finish</span>


How to create multiple circles on a vertical line - HTML & CSS, I have the code which got me three circles connected by two lines. Have a look here: JSFIDDLE Here is my code: HTML. Create DIV Boxes with Arrows and Pointers, using CSS - Duration: 8:46. Arjun Khara 47,041 views

Well, it's a ton of markup, but you could do something like this:

Use display: table-cell; as it will automatically adjust the widths of items to fill spaces.

Then, have a set of circle elements, and a set of line elements. The line elements just have a bottom border on them, and the circle elements are just relatively positioned downwards to align with the line.

Note that the circles need to have an extra container, otherwise table-cell will stretch all the circles to the same height, and you don't want that that. This will require you to set the width of those containers to be 1px, which will force it to the size of it's child.

Check out this demo:

css: how to make circles connected by lines responsive with , HTML and CSS for Timeline with of Circle-Steps, Connecting Line, and corresponding descriptions - Timeline Display. Setting the border-radius of each side of an element to 50% will create the circle display at any { border-radius: 50%; width: 200px; height: 200px; /* width and height can be anything, as long as they're equal */ }

HTML and CSS for Timeline with of Circle-Steps, Connecting Line , The green circles count is random (around 0 – 10). All green circles are connected to blue circle with a line. I know to draw circle in CSS. I need  Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

CSS3 Recipes, The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0,0) The r attribute defines the radius of the circle.

Creating CSS circles connected by lines to middle , Building a Progress Ring, Quickly From the many ways available to draw a circle using just HTML and CSS, I’m choosing SVG since it’s possible to configure and

  • Possible duplicate? <…>
  • Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results
  • @NamelessOne - not a duplicate I don't believe
  • @HGandhi: Are you open to solutions using SVG? I think SVG would better than pure CSS for this type of interface.
  • @TylerEich - I am open to the suggestion.
  • This was a brilliant and elegant solution. Nice work.
  • To increase the distance between each circle and introduce responsive behavior, make 2 modifications: 1) instead of em, use vw in the li margin like so: margin 0 5vw 0 5vw;, then to stretch the lines between each circle, update the li::before properties: left: -11vw; width: 11vw;
  • @AaronDanielson and others looking for a fully responsive, stretchy and positionable (flexbox) version, see my answer to this question:
  • How about adding a label below each number (outside of the circle)?
  • Nice effort there, responsive! \o/
  • How would you get the lines vertical? I tried here:
  • This is very pretty!
  • I think it can be done much simpler with no additional markup using pseudo elements.