Progress bar

Twine Version: 2.6
[also choose a Story Format tag above]
I am trying to make 2 progress bars which the first one goes up by 20% and the second one by 10%. I have 12 passages in total 10 of which if clicked the first progress bar goes up by 20% and if it reaches 100% it shows the 11th passage and goes back down to 0%. The second progress bar goes up by 10% up to 100% and when reached show passage 12 which finishes the minigame.
Here is the code which I am using right now but I want to add a progress bar to it.

<p>
[[passage1]][[passage2]][[passage3]][[passage4]][[passage5]][[passage6]][[passage7]][[passage8]][[passage9]][[passage10]]</p><<if $showNewPassage2>><p>[[passage11]]</p><<else>><<set $visits2 = $visits2 + 1>><<if $visits2 >= 6>><<set $showNewPassage2 = true>><<endif>><<endif>><<if $showNewPassage>><p>[[passage12]]</p><<else>><<set $visits = $visits + 1>><<if $visits >= 11>><<set $showNewPassage = true>><<endif>><<endif>>

Hi!

I think you might find this page useful, as it has different ways of creating a progress bar (there are many ways of achieving this).

Also, the current version of SugarCube doesn’t use <<endif>> to close a conditional statement, but <</if>>.