General customization instructions
Classes
Progress bar segments are marked by .done and .todo classes for the completed reviews and the sections counting the cards that are yet to be studied respectively. Completed segments are further marked by .again, .hard, .good, and .easy to distinguish between the different ratings assigned during the review.
Similarly .cooldown marks .todo segments counting reviews that will become available later in the day (cards which have already been reviewed and now are waiting for their next (re)learning step) and the .future class marks segments counting all future intraday (re)learning steps specified in deck settings that will come after the step a card is currently on. .todo without the two additional classes marks cards that are ready to be studied right now.
The states of done and todo cards counted by each segment are indicated by the .new, .learn, and .review classes. To further distinguish between learned and relearned cards, the later ones have additional .re class.
Full HTML source code
<div id="lt-progress-bar">
<div class="prog-segment new done again"></div>
<div class="prog-segment new done hard"></div>
<div class="prog-segment new done good"></div>
<div class="prog-segment new done easy"></div>
<div class="prog-segment new todo"></div>
<span></span>
<div class="prog-segment learn done again"></div>
<div class="prog-segment learn done hard"></div>
<div class="prog-segment learn done good"></div>
<div class="prog-segment learn done easy"></div>
<div class="prog-segment learn todo"></div>
<div class="prog-segment learn todo cooldown"></div>
<div class="prog-segment learn todo future"></div>
<span></span>
<div class="prog-segment review done again"></div>
<div class="prog-segment review done hard"></div>
<div class="prog-segment review done good"></div>
<div class="prog-segment review done easy"></div>
<div class="prog-segment review todo"></div>
<span></span>
<div class="prog-segment re learn done again"></div>
<div class="prog-segment re learn done hard"></div>
<div class="prog-segment re learn done good"></div>
<div class="prog-segment re learn done easy"></div>
<div class="prog-segment re learn todo"></div>
<div class="prog-segment re learn todo cooldown"></div>
<div class="prog-segment re learn todo future"></div>
</div>
Segment colors
Colors are controlled via the background property. To target specific progress segments or groups of segments the classes described above can be appended to the general .prog-segment class. For example, to change the color of all learning reviews completed today, the following declaration should be added to the styles:
.prog-segment.done.learn {
background: RebeccaPurple;
}
(this will change the color for both learned and relearned cards, regardless of the rating they received during the study)
The colors can be specified using names from this list, or by copy-pasting their HEX code from a color-picker.
Setting the same color to multiple adjacent segments effectively merges them together and makes them functionally indistinguishable from a single segment.
Disabling segments
To remove certain components of the bar, display: none can be applied. For example:
.prog-segment.again {
display: none;
}
removes reviews graded Again from the daily progress for all card states, while
.prog-segment.re.learn.future {
display: none;
}
specifically disables display of future relearning steps.
Reordering segments
The progress bar uses flexbox and its associated properties to control the layout. In particular, the order property can be employed to move the segments around. Elements with lesser values are located to the left of the elements with higher values, elements with the same order value are sorted according to their order in the source HTML code (see above). For example, to move new cards to be shown after all the other segments, the following declaration should be added:
.prog-segment.new {
order: 2;
}
Note that some elements have order: 1 and order: -1 in the default progress bar style. All order values can be reset with the following declaration:
.prog-segment.prog-segment { /* double selector for increased specificity */
order: 0;
(the reset should be placed before all assignments of the customized order values to avoid resetting them too)
Grouping segments
For breaking the layout into multiple rows, the progress bar includes several <span> elements, which can be activated by adding
#lt-progress-bar span {
flex-basis: 101%; /* > 100% to ensure pushing of potential zero-width segments to the next line */
}
To target individual breaks, the selector should be changed to #lt-progress-bar span:nth-of-type(1) with the digit indicating the number of the <span> in the HTML code.
The location of the line breaks can be controlled with the same order property described above.
Weights
On top of the ability to turn certain segments off and on completely, the weights of the enabled sections can be changed in a continuous fashion. For example, adding the following declaration will make the reviews rated Again to contribute to the daily progress only half as much as everything else:
.prog-segment.again {
flex-grow: calc(0.5 * var(--count));
}
Position
Position of the bar can be controlled directly through the constituent inset properties. Declaration for moving the bar to the bottom of the page, for example:
#lt-progress-bar {
bottom: 0;
}
By default, the progress bar appears in the fixed place. Declaration for embedding it inside the overall layout and making it scrollable together with the whole page:
#lt-progress-bar {
position: static;
}
Width
By default, the width of the bar is set in viewport units to avoid it being compressed when a vertical scrollbar appears on the page. To change the width of the progress bar while keeping the centering, the following two rules can be added:
#lt-progress-bar {
width: 80vw;
left: 10vw; /* = (100 - 80) / 2 */
}
To set the width in the absolute units instead:
#lt-progress-bar {
width: 420px;
margin: 0 auto;
right: 0;
}
(with absolute width the compression by the scrollbar is not an issue, so the centering can be automated)
Height
Because the height of the bar depends on the number of rows in the layout, it is better controlled via heights of individual segments instead of the bar as a whole:
.prog-segment {
height: 15px;
}
Decorations
Some additional useful styles, such as rounding the borders and dropping a shadow:
#lt-progress-bar {
border-radius: 4px;
overflow: hidden;
drop-shadow: 1px 1px 2px #0005;
}
Even more examples of advanced styling are presented below.
