progress bar custom bb code

how can I add this progress bar as a custom bb code for my forum?

Code:

<div class="dollartimes-pb" style="font-family: helvatica; width: 300px; box-sizing: border-box; clear:both;">
  <div class="dollartimes-pb-title" style="font-size:16px; overflow: hidden;">project progress at {text}%</div>
  <div class="dollartimes-pb-frame" title="{text}% / {text}% towards goal" style="border-radius: 5px; background-color: #ffffff;padding: 0px;border: 1px solid #000; height: 30px; margin: 2px 0 1px;">
    <div class="dollartimes-pb-fill" style="width:{text}%; height: 100%; margin-top: 0px; background: repeating-linear-gradient(-45deg, rgba(74,134,232,1), rgba(74,134,232,1) 8px, rgba(74,134,232,0.8) 8px, rgba(74,134,232,0.8) 16px);">&nbsp;</div>
  </div>
  <div>
    <span class="dollartimes-pb-caption" style="float: left; font-size: 12px;">0%</span>
    <span class="dollartimes-pb-caption" style="float: right; font-size: 12px;">100%</span>
  </div>
  <div style="clear: both;"></div>
  <div style="margin: 2px 0 0 0; text-align: right;">
  </div>
</div>

for example: [progress]95[/progress] would look like this:

Good afternoon!

Please specify the forum version and the link to the forum.
Earlier you posted a link to AwesomeBB forum. In your profile, you specified phpbb3 as version of forum.

Razor12345 wrote:Good afternoon!

Please specify the forum version and the link to the forum.
Earlier you posted a link to AwesomeBB forum. In your profile, you specified phpbb3 as version of forum.

correct, the forum is AwesomeBB: https://www.yotamarker.com/

Please @megamein inform your profile information also

skouliki wrote:Please @megamein inform your profile information also

OK, please tell me how to do that

By going to your profile tab information and add the correct information

Coucou @megamein

Before:


After:


Simply go to ACP > Modules > HTML & Javascript > Javascript codes management, create a new code in all pages and use this content

Code:

$(function() {

$('.post-content').each(function(){
    var str = $(this).text();
    var percentage = str.substring(
        str.indexOf("[progress]")+10,
        str.lastIndexOf("[/progress]")
    );

    var buttonStart = $(this).html().replace(/\[progress\]/,'<div class="dollartimes-pb" style="font-family: helvatica; width: 300px; box-sizing: border-box; clear:both;"> <div class="dollartimes-pb-title" style="font-size:16px; overflow: hidden;">project progress at '+percentage+'%</div> <div class="dollartimes-pb-frame" title="'+percentage+'% / '+percentage+'% towards goal" style="border-radius: 5px; background-color: #ffffff;padding: 0px;border: 1px solid #000; height: 30px; margin: 2px 0 1px;"> <div class="dollartimes-pb-fill" style="width:'+percentage+'%; height: 100%; margin-top: 0px; background: repeating-linear-gradient(-45deg, rgba(74,134,232,1), rgba(74,134,232,1) 8px, rgba(74,134,232,0.8) 8px, rgba(74,134,232,0.8) 16px);">&nbsp;</div> </div> <div> <span class="dollartimes-pb-caption" style="float: left; font-size: 12px;">0%</span> <span class="dollartimes-pb-caption" style="float: right; font-size: 12px;">100%</span> </div> <div style="clear: both;"></div> <div style="margin: 2px 0 0 0; text-align: right;"> </div> </div>');
        $(this).html(buttonStart);

        var buttonEnd = $(this).html().replace(percentage+'[/progress]','');
        $(this).html(buttonEnd);

});
});