$progress-height: 5px;

body:before {
  background: black;
  content: '';
  display: block;
  height: $progress-height;
  left: 0;
  position: fixed;
  top: 0;
  transition: 500ms width;
  z-index: 3;
  width: 0%;
}

body[data-lagom-progress]:before {
  width: 100%;
}

@for $i from 0 through 100 {
  body[data-lagom-progress="#{$i}"]:before {
    width: percentage($i/100);
  }
}

body:after {
  font-size: 1.2rem;
  right: 1.5rem;
  padding: 1rem;
  position: fixed;
  text-align: left;
  bottom: 1.5rem;
  z-index: 3;
  content: attr(data-lagom-current-slide) " / " attr(data-lagom-total-slides);
}