Edit
para poner el primer elemento al 0% y el último elemento al 100% en la solución que encontré es necesario saber cuantos elementos hay. Tal vez se pueda refinar
HTML
<body>
<div class="mycontainer">
<div class="line">
<div class="step step-5">
<clr-icon class="circle circle-1">1</clr-icon>
<clr-icon class="circle circle-2">2</clr-icon>
<clr-icon class="circle circle-3">3</clr-icon>
<clr-icon class="circle circle-4">4</clr-icon>
<clr-icon class="circle circle-5">5</clr-icon>
</div>
</div>
</div>
<div class="mycontainer">
<div class="line">
<div class="step step-3">
<clr-icon class="circle circle-1">1</clr-icon>
<clr-icon class="circle circle-2">2</clr-icon>
<clr-icon class="circle circle-3">3</clr-icon>
</div>
</div>
</div>
</body>
LESS
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f4f4f4;
}
.mycontainer {
position: relative;
width: 100%;
display: block;
margin:50px 0;
}
.step {
position: absolute;
left: 0;
right: 0;
top: -18px;
height: 36px;
}
.step .circle {
position: absolute;
color: black;
line-height: 36px;
text-align: center;
z-index: 1;
display: block;
width: 36px;
}
.step .circle::before {
left: calc(50% - 18px);
top: calc(50% - 18px);
position: absolute;
background-color: white;
border-radius: 50%;
width: 36px;
height: 36px;
content: " ";
z-index:-1;
}
.line {
height: 5px;
width: 100%;
background-color: green;
}
.step-3 {
.generate-steps(3);
}
.step-5 {
.generate-steps(5);
}
.generate-steps(@s){
.generate-circles(@s - 1);
.circle-@{s} {left: ~"calc(100% - 36px)";}
}
.generate-circles(@n, @i:0) when (@i =< @n ) {
@b: @i+1;
.circle-@{b} {
left: (@i * 100% / @n);
}
.generate-circles(@n, (@i + 1));
}
- En el html el div step dice cuantos elementos hay
- cada circle tiene un numero segun su posicion
- Less arma la combinación de steps y circles con 2 funciones
completo:
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f4f4f4;
}
.mycontainer {
position: relative;
width: 100%;
display: block;
margin: 50px 0;
}
.step {
position: absolute;
left: 0;
right: 0;
top: -18px;
height: 36px;
}
.step .circle {
position: absolute;
color: black;
line-height: 36px;
text-align: center;
z-index: 1;
display: block;
width: 36px;
}
.step .circle::before {
left: calc(50% - 18px);
top: calc(50% - 18px);
position: absolute;
background-color: white;
border-radius: 50%;
width: 36px;
height: 36px;
content: " ";
z-index: -1;
}
.line {
height: 5px;
width: 100%;
background-color: green;
}
.step-3 .circle-1 {
left: 0%;
}
.step-3 .circle-2 {
left: 50%;
}
.step-3 .circle-3 {
left: 100%;
}
.step-3 .circle-3 {
left: calc(100% - 36px);
}
.step-5 .circle-1 {
left: 0%;
}
.step-5 .circle-2 {
left: 25%;
}
.step-5 .circle-3 {
left: 50%;
}
.step-5 .circle-4 {
left: 75%;
}
.step-5 .circle-5 {
left: 100%;
}
.step-5 .circle-5 {
left: calc(100% - 36px);
}
<body>
<div class="mycontainer">
<div class="line">
<div class="step step-5">
<clr-icon class="circle circle-1">1</clr-icon>
<clr-icon class="circle circle-2">2</clr-icon>
<clr-icon class="circle circle-3">3</clr-icon>
<clr-icon class="circle circle-4">4</clr-icon>
<clr-icon class="circle circle-5">5</clr-icon>
</div>
</div>
</div>
<div class="mycontainer">
<div class="line">
<div class="step step-3">
<clr-icon class="circle circle-1">1</clr-icon>
<clr-icon class="circle circle-2">2</clr-icon>
<clr-icon class="circle circle-3">3</clr-icon>
</div>
</div>
</div>
</body>
aqui debajo la respuesta original que distribuye diferente
usando Flex y englobando los circles en step
.step
position: absolute;
left: 0;
right: 0;
esto es igual a left 0% width 100%
display: flex;
flex-direction: row;
poner los children en una fila
top:-18px;
height: 36px;
le damos un alto y lo movemos para arriba así queda justo sobre la linea
.step .circle
flex: auto;
line-height: 36px;
text-align: center;
z-index: 1;
le damos un alto al texto de ejemplo ponemos el z-index a 1
.step .circle::before
left: calc(50% - 18px);
top: calc(50% - 18px);
position: absolute;
posicionado al centro del circle
background-color: white;
border-radius: 50%;
lo hacemos circle
width: 36px;
height: 36px;
z-index:-1;
definimos el tamaño y le decimos que se vaya un nivel para atras (asi queda detras de los números de ejemplo)
completo:
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f4f4f4;
}
.mycontainer {
position: relative;
width: 100%;
display: block;
margin:50px 0;
}
.step {
position: absolute;
left: 0;
right: 0;
display: flex;
flex-direction: row;
top: -18px;
height: 36px;
}
.step .circle {
position: relative;
color: black;
flex: auto;
line-height: 36px;
text-align: center;
z-index: 1;
}
.step .circle::before {
left: calc(50% - 18px);
top: calc(50% - 18px);
position: absolute;
background-color: white;
border-radius: 50%;
width: 36px;
height: 36px;
content: " ";
z-index:-1;
}
.line {
height: 5px;
width: 100%;
background-color: green;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="mycontainer">
<div class="line">
<div class="step">
<clr-icon class="circle">1</clr-icon>
<clr-icon class="circle">2</clr-icon>
<clr-icon class="circle">3</clr-icon>
<clr-icon class="circle">4</clr-icon>
<clr-icon class="circle">5</clr-icon>
</div>
</div>
</div>
<div class="mycontainer">
<div class="line">
<div class="step">
<clr-icon class="circle">1</clr-icon>
<clr-icon class="circle">2</clr-icon>
<clr-icon class="circle">3</clr-icon>
</div>
</div>
</div>
</body>
</html>
Nota:
Al pasar al less estas líneas:
left: calc(50% - 18px);
top: calc(50% - 18px);
los cálculos deben ir entre comillas y escapeados así no los calcula de antemano
left: ~"calc(50% - 18px)";
top: ~"calc(50% - 18px)";