Saltar al contenido

Creación de círculos CSS3 conectados por líneas

Hola usuario de nuestro sitio web, hemos encontrado la solución a tu búsqueda, continúa leyendo y la encontrarás más abajo.

Solución:

Puede lograr este efecto sin marcado adicional utilizando pseudoelementos y el selector de hermanos adyacente (~):

css3 círculos conectados por líneas

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;


li::before
  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;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

Demostración en CodePen

Cronología de Flexbox con pasos


Trabajando con la excelente respuesta de @bookcasey, me encontré haciéndolo de la manera opuesta para que respondiera;

  • Pongo los círculos como ::before pseudo selectores (con contador automático de CSS).
  • Las líneas entre ellas son las li elementos para que puedan ser estirados por flexbox.

Ahora se extiende para llenar el padre y se ocupa de diferentes números de pasos automáticamente. También puedes hacer cosas como ajustar font-size en el padre ul y hacer que todo se adapte.

Estoy seguro de que se puede mejorar, así que siéntete libre de contribuir 🙂


CodePen interactivo: Línea de tiempo de Flexbox con pasos: http://codepen.io/ccondrup/pen/bqbGWB?editors=1100


ul 
  align-content: center;
  align-items: center;
  counter-reset: stepCount;
  display: flex;
  justify-content: space-around;
  margin: 10vh auto 20vh;  /* for codepen */


li 
  background: dodgerblue;
  color: white;
  content: ' ';
  display: flex;
  flex-grow: 1;
  height: .3em;
  line-height: 1em;
  margin: 0;
  position: relative;
  text-align: right;
  z-index: -1;


li::before 
  background: dodgerblue;
  border-radius: 50%;
  color: white;
  content: counter(stepCount);
  counter-increment: stepCount;
  height: 2em;
  left: -2em;
  line-height: 2em;
  position: absolute;
  text-align: center;
  top: -.85em;
  width: 2em;


li.active 
  background-color: lightblue;


li.active~li 
  background-color: lightblue;


li.active~li::before 
  background-color: lightblue;


li:last-child 
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 0;
/* Shorthand: flex: 0 1 0; */


ul.bigger 
  font-size: 1.3em;


ul.highlight-active li.active::before 
  font-size: 1.6em;
  background: navy;


ul.roman li::before 
  content: counter(stepCount, upper-roman);


ul.triangle li::before 
  width: 0;
  height: 0;
  border-radius: 0;
  border-left: 1em solid white;
  border-right: 1em solid white;
  border-bottom: .8em solid dodgerblue;
  content: '';
  top: -.65em;


ul.triangle li:first-child::before 
  left: 0;


ul.triangle li.active~li::before 
  border-bottom-color: lightblue;

No es mío pero funciona bastante bien y se ve elegante, solo funciona con css y puedes personalizarlo más. Fuente http://jsfiddle.net/Misiu/y1Lo3qh1/

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('✓');
    $('.progress .bar:nth-of-type(' + (i - 1) + ')').addClass('active');
    $('.progress .bar:nth-of-type(' + (i - 2) + ')').removeClass('active').addClass('done');
    i++;
    if (i == 8) 
        $('.progress .circle').removeClass().addClass('circle');
        $('.progress .bar').removeClass().addClass('bar');
        i = 1;
    
, 1000);
*,
*:after,
*: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;
  vertical-align:top;

.progress .bar 
  position: relative;
  width: 80px;
  height: 6px;
  margin: 0 -5px 17px -5px;
  border-left: none;
  border-right: none;
  border-radius: 0;
  top:16px;
  vertical-align:top

.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 .bar.active 
  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 .circle.active .label 
  color: #FFF;
  background: #0c95be;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);

.progress .circle.active .title 
  color: #0c95be;


1 Order
2 Address
3 Payment
4 Review
5 Finish
1 Order informations
2 Order review
3 Finish

valoraciones y comentarios

Finalizando este artículo puedes encontrar las anotaciones de otros sys admins, tú todavía tienes la habilidad mostrar el tuyo si dominas el tema.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *