mahaplatform/reframe

.generate-percents(@n, @i: 1) when (@i =< @n) {
  .p@{i} .bar {
    transform: rotate((360deg * @i / 100));
  }
  .generate-percents(@n, (@i + 1));
}

.reframe-progress {
  display: inline-block;
  text-align: center;
  .pie {
    position: relative;
    font-size: 120px;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    margin: 0 auto;
    background-color: fadeout(@black, 90);
    &:hover {
      cursor: default;
    }
    &:after {
      position: absolute;
      top: 0.08em;
      left: 0.08em;
      display: block;
      content: " ";
      border-radius: 50%;
      background-color: @white;
      width: 0.84em;
      height: 0.84em;
    }
  }
  .p51 .slice, .p52 .slice, .p53 .slice, .p54 .slice, .p55 .slice, .p56 .slice, .p57 .slice, .p58 .slice, .p59 .slice, .p60 .slice, .p61 .slice, .p62 .slice, .p63 .slice, .p64 .slice, .p65 .slice, .p66 .slice, .p67 .slice, .p68 .slice, .p69 .slice, .p70 .slice, .p71 .slice, .p72 .slice, .p73 .slice, .p74 .slice, .p75 .slice, .p76 .slice, .p77 .slice, .p78 .slice, .p79 .slice, .p80 .slice, .p81 .slice, .p82 .slice, .p83 .slice, .p84 .slice, .p85 .slice, .p86 .slice, .p87 .slice, .p88 .slice, .p89 .slice, .p90 .slice, .p91 .slice, .p92 .slice, .p93 .slice, .p94 .slice, .p95 .slice, .p96 .slice, .p97 .slice, .p98 .slice, .p99 .slice, .p100 .slice {
    clip: rect(auto, auto, auto, auto);
  }
  .bar, .p51 .fill, .p52 .fill, .p53 .fill, .p54 .fill, .p55 .fill, .p56 .fill, .p57 .fill, .p58 .fill, .p59 .fill, .p60 .fill, .p61 .fill, .p62 .fill, .p63 .fill, .p64 .fill, .p65 .fill, .p66 .fill, .p67 .fill, .p68 .fill, .p69 .fill, .p70 .fill, .p71 .fill, .p72 .fill, .p73 .fill, .p74 .fill, .p75 .fill, .p76 .fill, .p77 .fill, .p78 .fill, .p79 .fill, .p80 .fill, .p81 .fill, .p82 .fill, .p83 .fill, .p84 .fill, .p85 .fill, .p86 .fill, .p87 .fill, .p88 .fill, .p89 .fill, .p90 .fill, .p91 .fill, .p92 .fill, .p93 .fill, .p94 .fill, .p95 .fill, .p96 .fill, .p97 .fill, .p98 .fill, .p99 .fill, .p100 .fill {
    position: absolute;
    border: 0.08em solid lighten(@black, 30);
    width: 0.84em;
    height: 0.84em;
    clip: rect(0em, 0.5em, 1em, 0em);
    border-radius: 50%;
    transform: rotate(0deg);
  }
  .p51 .bar:after, .p51 .fill, .p52 .bar:after, .p52 .fill, .p53 .bar:after, .p53 .fill, .p54 .bar:after, .p54 .fill, .p55 .bar:after, .p55 .fill, .p56 .bar:after, .p56 .fill, .p57 .bar:after, .p57 .fill, .p58 .bar:after, .p58 .fill, .p59 .bar:after, .p59 .fill, .p60 .bar:after, .p60 .fill, .p61 .bar:after, .p61 .fill, .p62 .bar:after, .p62 .fill, .p63 .bar:after, .p63 .fill, .p64 .bar:after, .p64 .fill, .p65 .bar:after, .p65 .fill, .p66 .bar:after, .p66 .fill, .p67 .bar:after, .p67 .fill, .p68 .bar:after, .p68 .fill, .p69 .bar:after, .p69 .fill, .p70 .bar:after, .p70 .fill, .p71 .bar:after, .p71 .fill, .p72 .bar:after, .p72 .fill, .p73 .bar:after, .p73 .fill, .p74 .bar:after, .p74 .fill, .p75 .bar:after, .p75 .fill, .p76 .bar:after, .p76 .fill, .p77 .bar:after, .p77 .fill, .p78 .bar:after, .p78 .fill, .p79 .bar:after, .p79 .fill, .p80 .bar:after, .p80 .fill, .p81 .bar:after, .p81 .fill, .p82 .bar:after, .p82 .fill, .p83 .bar:after, .p83 .fill, .p84 .bar:after, .p84 .fill, .p85 .bar:after, .p85 .fill, .p86 .bar:after, .p86 .fill, .p87 .bar:after, .p87 .fill, .p88 .bar:after, .p88 .fill, .p89 .bar:after, .p89 .fill, .p90 .bar:after, .p90 .fill, .p91 .bar:after, .p91 .fill, .p92 .bar:after, .p92 .fill, .p93 .bar:after, .p93 .fill, .p94 .bar:after, .p94 .fill, .p95 .bar:after, .p95 .fill, .p96 .bar:after, .p96 .fill, .p97 .bar:after, .p97 .fill, .p98 .bar:after, .p98 .fill, .p99 .bar:after, .p99 .fill, .p100 .bar:after, .p100 .fill {
    transform: rotate(180deg);
  }
  *,  *:before,  *:after {
    box-sizing: content-box;
  }
  span {
    position: absolute;
    width: 100%;
    z-index: 1;
    left: 0;
    top: 0;
    width: 8.3em;
    line-height: 8.3em;
    font-size: 0.12em;
    color: fadeout(@black, 50);
    display: block;
    text-align: center;
    white-space: nowrap;
  }
  .slice {
    position: absolute;
    width: 1em;
    height: 1em;
    clip: rect(0em, 1em, 1em, 0.5em);
  }
  .generate-percents(100);
}