Kopumā iznākums izksatīsies šādi:
Maksimālais itkā ir 100, bet skaitīties viņš var bezgalīgi, lūk piemērs:
Tātad, šeit būs kods, likšu visu kopā, css, js, un html:
Code
<style>
.progress{height:32px;font:16px/32px 'Cuprum';text-align:center;background:#6a6a6a ;margin:20px 0;box-shadow:inset 0 0 15px rgba(0,0,0,0.2), 0 0 0 5px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255,0.1);border-radius:4px;}
.progress-bar{height:32px;font:16px/32px 'Cuprum';max-width:100%;text-align:center;background:rgba(63,161,0,1);overflow:hidden;border-radius:4px; }
</style>
<div class="progress">
<section id="user-progress"></section>
</div>
<script>
var DELPOINTS="0";
var $_USERNAME$="10";
<?if($_AVATAR$)?> var post="0";<?else?>var post="0";<?endif?>
var comments="456";
var result=-parseInt(DELPOINTS)+parseInt(post)+parseInt(comments)+parseInt($_USERNAME$);
$('#user-progress').html('<div class="progress-bar progress" style="width:'+result+'%">'+result+'</div>');</script>
Likt var kur tik vēlies redzēt, tikai būs jāpielabo tie kodi ($_AVATAR$ un $_USERNAME$, jo man šis stāv profilā)