Anki Progression [Support Thread]

Anki Add-ons
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. Multi-track states

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: 101%;
}

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

.prog-segment:not(.empty) {
    min-width: 1px;
}

.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;
}

#lt-progress-bar:not(:has(.prog-segment.new:not(.empty))) .prog-segment.new,
#lt-progress-bar:not(:has(.prog-segment.learn:not(.empty):not(.cooldown):not(.future))) .prog-segment.learn,
#lt-progress-bar:not(:has(.prog-segment.review:not(.empty))) .prog-segment.review {
    height: 0;
}

.prog-segment.animated {
    transition-property: flex-grow, height;
}

4A. Multi-track states (+learning)

Multi-track 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 span {
    flex-basis: 101%;
}

.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;
}

.prog-segment.new:not(.empty):is(.prog-segment.new:not(.empty) ~ .prog-segment),
.prog-segment.learn:not(.re):not(.empty):is(.prog-segment.learn:not(.re):not(.empty) ~ .prog-segment),
.prog-segment.review:not(.empty):is(.prog-segment.review:not(.empty) ~ .prog-segment),
.prog-segment.re.learn:not(.empty):is(.prog-segment.re.learn:not(.empty) ~ .prog-segment) {
    margin-left: 1px;
}

.prog-segment.new:has(.prog-segment.learn:not(.re):not(.empty)),
.prog-segment.learn:not(.re):has(.prog-segment.review:not(.empty)),
.prog-segment.review:has(.prog-segment.re.learn:not(.empty)) {
    margin-bottom: 1px;
}

#lt-progress-bar:not(:has(.prog-segment.new:not(.empty))) .prog-segment.new,
#lt-progress-bar:not(:has(.prog-segment.learn:not(.re):not(.empty))) .prog-segment.learn:not(.re),
#lt-progress-bar:not(:has(.prog-segment.review:not(.empty))) .prog-segment.review,
#lt-progress-bar:not(:has(.prog-segment.re.learn:not(.empty))) .prog-segment.re.learn {
    height: 0;
}

.prog-segment.animated {
    transition-property: flex-grow, height;
}

4B. Two-track states

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:has(:is(.new, .learn:not(.re)):not(.empty)):has(:is(.review,.re.learn):not(.empty)) {
    gap: 1px 0px;
}

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

.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;
}

#lt-progress-bar:not(:has(.prog-segment:is(.new, .learn:not(.re)):not(.empty))) .prog-segment:is(.new, .learn:not(.re)),
#lt-progress-bar:not(:has(.prog-segment:is(.review,.re.learn):not(.empty))) .prog-segment:is(.review,.re.learn) {
    height: 0;
}

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: 101%;
}

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

.prog-segment:not(.empty) {
    min-width: 1px;
}

.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;
}

#lt-progress-bar:not(:has(.prog-segment.new:not(.empty))) .prog-segment.new {
    height: 0;
}
#lt-progress-bar:not(:has(.prog-segment.learn:not(.re):not(.empty))) .prog-segment.learn:not(.re) {
    height: 0;
}
#lt-progress-bar:not(:has(.prog-segment.review:not(.empty))) .prog-segment.review {
    height: 0;
}
#lt-progress-bar:not(:has(.prog-segment.re.learn:not(.empty))) .prog-segment.re.learn {
    height: 0;
}

.prog-segment.animated {
    transition-property: flex-grow, height;
}

5A. Comprehensive (smooth)

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

Smooth comprehensive progress bar

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

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

.prog-segment:not(.empty) {
    min-width: 1px;
}

.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));
}

#lt-progress-bar:not(:has(.prog-segment.new:not(.empty))) .prog-segment.new {
    height: 0;
}
#lt-progress-bar:not(:has(.prog-segment.learn:not(.re):not(.empty))) .prog-segment.learn:not(.re) {
    height: 0;
}
#lt-progress-bar:not(:has(.prog-segment.review:not(.empty))) .prog-segment.review {
    height: 0;
}
#lt-progress-bar:not(:has(.prog-segment.re.learn:not(.empty))) .prog-segment.re.learn {
    height: 0;
}

.prog-segment.animated {
    transition-property: flex-grow, height;
}

How to set up

  1. Install the add-on (Tools → Add-ons → Get Add-ons... → paste “174803219” (the add-on id) → Ok → restart Anki)
  2. Open the add-on folder (Tools → Add-ons → select “Anki Progression” → View Files)
  3. Open the “user_files” folder
  4. Edit the “common_styles.css” file in any text editor and copy-paste the desired preset CSS inside
  5. (optional) adjust the colors or any other parameters in the text
  6. 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.