Anki Progression [Support Thread]

Anki Add-ons
1

Progression bar
Support thread for the Anki Progression [Lτ] add-on, which adds a versatile and customizable progress bar to Anki. Key distinctions from other progress bar add-ons:

Stats:

  • Allows distinguishing between daily reviews rated Again, Hard, Good, and Easy
  • Allows differentiation between New, Learning, and Review cards, as well as further distinction between Learning and Relearning states.
  • Accurately calculates New cards count for all decks, factoring in daily limits of each subdeck in the deck tree
  • Can separately display Learning/Relearning cards that are ready for review and those that are on cooldown for the current learning step
  • Estimates future intraday reviews for new, learning and relearning cards in accordance with learning and relearning steps in deck settings

Customization:

  • All categories described above can be freely disabled, grouped, merged, and reordered for a complete control over the level-of-detail of the displayed progress (the instructions will be provided below, in a separate post)
  • The whole setup is controlled directly with CSS, making every display property (including overall size, position, colors, animations, etc.) freely adjustable. In particular, it also allows breaking the progress bar into sections, wrapping the sections across several lines (sample presets for different styles can be found below)
  • Different appearances can be set up for different Anki windows (for instance, the progress bar can be displayed in a minimal style during the review, while providing a detailed breakdown of complete stats in the main deck screen)
  • The bar is embedded directly into the webview, allowing card templates to tailor the progress visualization, incorporating it seamlessly into their design (example).

What the add-on doesn’t do (so far):

  • Count manually rescheduled cards and cards in filtered decks
  • Take into account non-monotonic learning steps
  • Future steps calculations are based on estimates and can slightly deviate from the actual counts, especially when sibling burying is enabled in the settings. All estimates are convergent, however, so they should not display any residual reviews when non left
  • The learn-ahead timer is not applied when differentiating between ready-for-review and on-cooldown cards
2

Progress bar presets

1. Minimal

The most basic setup displaying the total reviews done in the current day vs total reviews due at the moment

Minimal progress bar

Preset CSS 
.prog-segment {
    background: var(--canvas-elevated);
}
  
.prog-segment.done {
    background: var(--button-primary-bg);
}
  
.prog-segment.cooldown,
.prog-segment.future {
    display: none;
}

1A. Minimal (strict)

Does not count Again (on all cards) and Hard (on (re)learned cards) towards the daily progress. Additionally displays cards which currently are in a (re)learning phase, but which are not due yet:

Strict minimal progress bar

Preset CSS 
.prog-segment {
    background: var(--canvas-elevated);
}

.prog-segment.done {
    background: red;
}

.prog-segment.again,
.prog-segment.learning.hard {
    display: none;
}

.prog-segment.todo {
    opacity: 0.6;
}

.prog-segment.cooldown {
    background: var(--border-subtle);
}

.prog-segment.future {
    display: none;
}

2. Ratings

Splits the completed portion of the progress bar into sections for each of the Again, Hard, Good, and Easy card ratings. The colors correspond to the Anki’s Stats screen. Additionally hints at the number of the future steps for all currently (re)learned cards.

Ratings progress bar

Preset CSS 
#lt-progress-bar {
    top: .25rem;
}

.prog-segment {
    height: 1rem;
}

.prog-segment.done {
    background: var(--rate-color);
}

.prog-segment.todo {
    background: var(--canvas-elevated);
}

.prog-segment.cooldown,
.prog-segment.future {
    background: var(--canvas);
}

.prog-segment.again {
    order: -4;
}
.prog-segment.hard {
    order: -3;
}
.prog-segment.good {
    order: -2;
}
.prog-segment.easy {
    order: -1;
}

2A. Ratings (AnkiDroid)

Similar setup but with the color scheme borrowed from AnkiDroid rating buttons:

AnkiDroid ratings progress bar

Preset CSS 
#lt-progress-bar {
    top: .25rem;
    box-shadow: 0px 2px 1px -1px rgba(20,20,20,.12),0px 1px 1px 0px rgba(20,20,20,.06),0px 1px 3px 0px rgba(20,20,20,.04);
}

.prog-segment {
    height: 1rem;
}

.prog-segment.done {
    background: var(--rate-color);
}

.prog-segment.todo {
    background: var(--canvas-elevated);
}

.prog-segment.cooldown {
    background: var(--canvas);
}

.prog-segment.future {
    display: none;
}

.prog-segment.again {
    --rate-color: color-mix(in lab, var(--ad-again) 80%, var(--ad-again-text));
    order: -4;
}
.prog-segment.hard {
    --rate-color: color-mix(in lab, var(--ad-hard) 80%, var(--ad-hard-text));
    order: -3;
}
.prog-segment.good {
    --rate-color: color-mix(in lab, var(--ad-good) 80%, var(--ad-good-text));
    order: -2;
}
.prog-segment.easy {
    --rate-color: color-mix(in lab, var(--ad-easy) 80%, var(--ad-easy-text));
    order: -1;
}

3. States

Splits both the completed (vivid) and pending (faint) sections of the progress bar into segments for each of the three primary New, Learn, Due card categories. The colors correspond to Anki’s review counters:

States progress bar

Preset CSS 
#lt-progress-bar {
    top: 4px;
}

.prog-segment.prog-segment {
    order: 0;
    height: 7px;
}

.prog-segment.done {
    background: var(--state-color);
}

.prog-segment.todo {
    background: color-mix(in lab, var(--state-color) 30%, var(--canvas-elevated));
}

.prog-segment.cooldown,
.prog-segment.future {
    display: none;
}

.prog-segment.learn {
    --state-color: var(--prog-relearn);
}

.prog-segment.new.done {
    order: -2;
}
.prog-segment.learn.done {
    order: -1;
}

.prog-segment.todo {
    order: 1;
}
.prog-segment.review.todo {
    order: 2;
}

3A. States (grouped)

Introduces additional category and respecitve supplementary color (gold) to display newly learned cards separately from relearned ones (which keep the default red Anki color). The ordering complies with Anki’s inner card “type” logic. Additionally shows future-due section and future (re)learning steps (in increasingly fainter colors):

Grouped states progress bar

Preset CSS 
.prog-segment.prog-segment {
    order: 0;
    height: 7px;
}

.prog-segment.done {
    background: var(--state-color);
}

.prog-segment.todo {
    background: color-mix(in lab, var(--state-color) 30%, var(--canvas-elevated));
}

.prog-segment.cooldown {
    opacity: 0.4;
}

3.5. Combined (ratings + states)

A setup combining ratings (for completed section of the bar) with card states (for the due section):

Combined ratings-states progress bar

Preset CSS 
#lt-progress-bar {
    top: .25rem;
    width: 90vw;
    left: 5vw;
    border-radius: 5px;
    overflow: hidden;
}

.prog-segment.prog-segment {
    order: 0;
    height: 1rem;
}

.prog-segment.done {
    background: var(--rate-color);
}

.prog-segment.todo {
    background: color-mix(in lab, var(--state-color) 40%, var(--canvas-elevated));
}

.prog-segment.cooldown,
.prog-segment.future {
    display: none;
}

.prog-segment.again {
    order: -4;
}
.prog-segment.hard {
    order: -3;
}
.prog-segment.good {
    order: -2;
}
.prog-segment.easy {
    order: -1;
}

4. States multi-row

A setup similar to #3, but with different states laid out into separate rows:

Multi-row states progress bar

Preset CSS 
#lt-progress-bar span {
    flex-basis: 100%;
}

.prog-segment.prog-segment {
    order: 0;
}

.prog-segment.done {
    background: var(--state-color);
}

.prog-segment.todo {
    background: color-mix(in lab, var(--state-color) 30%, var(--canvas-elevated));
}

.prog-segment.future,
.prog-segment.cooldown {
    display: none;
}

.prog-segment.learn {
    --state-color: var(--prog-relearn);
}

.prog-segment.learn.done {
    order: 1;
}
.prog-segment.learn.todo {
    order: 2;
}
.prog-segment.review + span {
    order: 3;
}
.prog-segment.review {
    order: 4;
}

4A. States multi-row (+learning)

Multi-row version of #3A, adds optional gaps between the progress segments:

Multi-row states progress bar with a separate learning section

Preset CSS 
#lt-progress-bar {
    gap: 1px;
}

#lt-progress-bar span {
    flex-basis: 100%;
}

.prog-segment.prog-segment {
    order: 0;
}

.prog-segment.done {
    background: var(--state-color);
}

.prog-segment.todo {
    background: color-mix(in lab, var(--state-color) 30%, var(--canvas-elevated));
}

.prog-segment.cooldown {
    opacity: 0.4;
}

4B. States two-row

Groups new cards with newly learned (both correspond to the “Learn” state in Anki’s “Card Info” logic), as well as review cards with relearned:

Two-row states progress bar

Preset CSS 
#lt-progress-bar {
    gap: 1px 0px;
}

#lt-progress-bar span:is(.new + span) {
    flex-basis: 100%;
}

.prog-segment.prog-segment {
    order: 0;
    height: 8px;
}

.prog-segment.done {
    background: var(--state-color);
}

.prog-segment.todo {
    background: color-mix(in lab, var(--state-color) 30%, var(--canvas-elevated));
}


.prog-segment.new.done {
    order: -4;
}
.prog-segment.learn.done {
    order: -3;
}
.prog-segment.new.todo {
    order: -2;
}
.prog-segment.learn.todo {
    order: -1;
}

.prog-segment.review.done {
    order: 1;
}
.prog-segment.re.done {
    order: 2;
}
.prog-segment.review.todo {
    order: 3;
}
.prog-segment.re.todo {
    order: 4;
}

.prog-segment.cooldown {
    opacity: 0.4;
}

.prog-segment.future {
    display: none;
}

5. Comprehensive

Provides the most detailed progress overview, displaying all combinations of card states, ratings, and readiness as individual segments:

Comprehensive progress bar

Preset CSS 
#lt-progress-bar {
    top: .25rem;
    width: 90vw;
    left: 5vw;
    border-radius: 5px;
    overflow: hidden;
}

#lt-progress-bar span {
    flex-basis: 100%;
}

.prog-segment.prog-segment {
    order: 0;
}

.prog-segment.done {
    background: color-mix(in lab, var(--rate-color) 80%, var(--state-color));
}

.prog-segment.todo {
    background: linear-gradient(to right, color-mix(in lab, var(--state-color) 60%, var(--canvas-elevated)), var(--state-color));
}

.prog-segment.cooldown {
    opacity: 0.6;
}

5A. Comprehensive (smooth)

Alters the previous setup smoothing the transitions between individual segments and sacrificing some technical precision of the graph for aesthetic quality:

Smooth comprehensive progress bar

Preset CSS 
#lt-progress-bar {
    top: .25rem;
}

#lt-progress-bar span {
    flex-basis: 100%;
}

.prog-segment.prog-segment {
    order: 0;
}

.prog-segment.future,
.prog-segment.cooldown {
    opacity: 1;
}

.prog-segment.again {
    background: linear-gradient(to right, var(--stat-again), var(--stat-hard));
}
.prog-segment.hard {
    background: linear-gradient(to right, var(--stat-hard), var(--stat-good));
}
.prog-segment.good {
    background: linear-gradient(to right, var(--stat-good), var(--stat-easy));
}
.prog-segment.easy {
    background: linear-gradient(to right, var(--stat-easy), var(--prog-done));
}

.prog-segment.todo {
    background: linear-gradient(to right, var(--state-color), color-mix(in lab, var(--state-color) 60%, transparent));
}
.prog-segment.cooldown {
    background: linear-gradient(to right, color-mix(in lab, var(--state-color) 60%, transparent), color-mix(in lab, var(--state-color) 40%, transparent));
}
.prog-segment.future {
    background: linear-gradient(to right, color-mix(in lab, var(--state-color) 40%, transparent), color-mix(in lab, var(--state-color) 10%, transparent));
}

How to set up

  1. Open the add-on folder (Tools → Add-ons → select “Anki Progression” → View Files)
  2. Open the “user_files” folder
  3. Edit the “common_styles.css” file in any text editor and copy-paste the code for the desired preset inside
  4. (optional) adjust the colors or any other parameters in the text
  5. Save and refresh Anki window (full restart is not required; if refreshing didn’t work, simply repeating it a few times should suffice for the changes to take effect)

Any of the “home_styles.css”, “deck_styles.css”, or “reviewer_styles.css” can be modified instead of the “common_styles.css” to selectively change the appearance of the progress bar in the respective Anki windows. Alternatively, the presets can be pasted into the styling tab of a card template to only apply the chosen setup when the respective cards are being reviewed in Anki.