<div class="wrap">
- (1...4591).each do |i|
  %div{:class => "box" }
</div>

html,
body {
  margin: 0;
  padding: 0;
}
html {
  box-sizing: border-box;
}
body {
  padding: 10px;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

.wrap {
  display: grid;
  max-width: 800px;
  margin: auto;
  grid-template-columns: repeat(52, 1fr);
  grid-template-rows: auto;
  gap: 1px;
  color: #fff;
  font-size: 0.8vw;
  align-items: center;
  text-align: center;
}
.box {
  padding: 100% 0 0;
  max-width: 15px;
  border: 1px solid #ccc;
  overflow: hidden;
}
.filled {
  background: #000;
}

const currentWeeks = 3576;
const delay = 0; // try 0 to 5
const boxes = document.querySelectorAll("div.box");
Array.from(boxes).every(function (box, week) {
  setInterval(function () {
    boxes[week].classList.add("filled");
  }, delay * week);
  return week <= currentWeeks;
});