A1 Wizard step progress

A1 Wizard step progress

by Csaba Hellinger

HTML

<div class="container">
  <div class="steps">
    <span class="step done">1</span>
    <span class="line done"></span>
    <span class="step done">2</span>
    <span class="line"></span>
    <span class="step">3</span>    
  </div>
</div>

<p>TODO: Step titles, animation?, glow?</p>

CSS

html,
body {
  margin: 0;
  font-family: sans-serif;
}

.container {
  --left: silver;
  --done: #2ca8e3;
  --max-width: 800px;
  --dot-size: 1rem;
  --line-thickness: 7px;

  display: flex;
  justify-content: center;
  isolation: isolate;

  padding: 1rem;

  font-size: 0;
  background: #666;
  color: #033953;
}

.steps {
  display: flex;
  align-items: center;

  max-width: var(--max-width);
  width: 100%;

  background: #555;
}

.step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  padding: 0.5rem;
  border-radius: 100rem;
  width: var(--dot-size);
  height: var(--dot-size);
  z-index: 1;

  font-size: 1.2rem;
  font-weight: 900;
  background: var(--left);
}

.line {
  display: inline-flex;
  flex: 0 1 1000px;

  height: var(--line-thickness);
  margin: 0 -5px;

  background: var(--left);
}

.done {
  background: var(--done);
}