Logseq Rainbow progress indicator

rainbow-indicator.css

/* Rainbow Progress Indicator */
[data-ref^="rainbow-"]:before {
  content: '';
  display: inline-block;
  margin-right: .5em;
  width: 30px;
  height: 5px;
  background: linear-gradient(to right,
    grey 11%,
    transparent 11%
  );
}
[data-ref="rainbow-20"]:before {
  background: linear-gradient(to right,
    red 11%,
    transparent 11%
  );
}
[data-ref="rainbow-40"]:before {
  background: linear-gradient(to right,
    red calc(100% / 9),
    transparent calc(100% / 9), transparent calc(100%/9*2),
    orange calc( 100% /9*2), orange calc(100%/9*3),
    transparent calc(100%/9*3)
  );
}
[data-ref="rainbow-60"]:before {
  background: linear-gradient(to right,
    red calc(100% / 9),
    transparent calc(100% / 9), transparent calc(100%/9*2),
    orange calc( 100% /9*2), orange calc(100%/9*3),
    transparent calc(100%/9*3), transparent calc(100%/9*4),
    gold calc(100%/9*4), gold calc(100%/9*5),
    transparent calc(100%/9*5)
  );
}
[data-ref="rainbow-80"]:before {
  background: linear-gradient(to right,
    red calc(100% / 9),
    transparent calc(100% / 9), transparent calc(100%/9*2),
    orange calc( 100% /9*2), orange calc(100%/9*3),
    transparent calc(100%/9*3), transparent calc(100%/9*4),
    gold calc(100%/9*4), gold calc(100%/9*5),
    transparent calc(100%/9*5), transparent calc(100%/9*6),
    yellowgreen calc(100%/9*6), yellowgreen calc(100%/9*7),
    transparent calc(100%/9*7)
  );
}

[data-ref="rainbow-100"]:before,
[data-ref="rainbow-done"]:before {
  background: linear-gradient(to right,
    red calc(100% / 9),
    transparent calc(100% / 9), transparent calc(100%/9*2),
    orange calc( 100% /9*2), orange calc(100%/9*3),
    transparent calc(100%/9*3), transparent calc(100%/9*4),
    gold calc(100%/9*4), gold calc(100%/9*5),
    transparent calc(100%/9*5), transparent calc(100%/9*6),
    yellowgreen calc(100%/9*6), yellowgreen calc(100%/9*7),
    transparent calc(100%/9*7), transparent calc(100%/9*8),
    green calc(100%/9*8)
  );
}