Modül yada plugin değil. css ve html kodlarında oluşuyor. Yani custom html modülü olarak kullanabilirsiniz.
Bunların modül yöneticisinden HTML ikonuna tıkladıktan sonra açılan pencereye yapıştırın.
<div id="progress_bar" class="ui-progress-bar ui-container"><div class="ui-progress" style="width: 86%; display: block;"><span class="ui-label" style="display: none;">Done</span></div>
<span class="projeler"><a href="http://www.joomla.gen.tr" target="_blank" title="Joomla! Portalı">Joomla! Portalı - Proje Yöneticisi, Tasarım, Uygulama</a></span> <span class="yuzdelik">%86</span></div>
Ardından bu kodları da temanızın template.css dosyasının içine koyun.
.ui-progress-bar {position: relative;height: 35px;margin:0 0 15px 0;padding-right: 2px;background-color: #abb2bc;border-radius: 35px;-moz-border-radius: 35px;-webkit-border-radius: 35px;background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6bcc6), color-stop(1, #9da5b0));background: -moz-linear-gradient(#9da5b0 0%, #b6bcc6 100%);-webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;-moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;}.ui-progress {position: relative;display: block;overflow: hidden;height: 33px;-moz-border-radius: 35px;-webkit-border-radius: 35px;border-radius: 35px;-webkit-background-size: 44px 44px; background-color: #74d04c;background: -webkit-gradient(linear, 0 0, 44 44,color-stop(0.00, rgba(255,255,255,0.17)),color-stop(0.25, rgba(255,255,255,0.17)),color-stop(0.26, rgba(255,255,255,0)),color-stop(0.50, rgba(255,255,255,0)),color-stop(0.51, rgba(255,255,255,0.17)),color-stop(0.75, rgba(255,255,255,0.17)),color-stop(0.76, rgba(255,255,255,0)),color-stop(1.00, rgba(255,255,255,0))), -webkit-gradient(linear, left bottom, left top, color-stop(0, #74d04c), color-stop(1, #9bdd62));background: -moz-repeating-linear-gradient(top left -30deg, rgba(255,255,255,0.17), rgba(255,255,255,0.17) 15px, rgba(255,255,255,0) 15px, rgba(255,255,255,0) 30px), -moz-linear-gradient(#9bdd62 0%, #74d04c 100%);-webkit-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;-moz-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;border: 1px solid #4c8932;-webkit-animation: animate-stripes 2s linear infinite;}.ui-progress2 {position: relative;display: block;overflow: hidden;height: 33px;-moz-border-radius: 35px;-webkit-border-radius: 35px;border-radius: 35px;-webkit-background-size: 44px 44px; background-color: #F20202;background: -webkit-gradient(linear, 0 0, 44 44,color-stop(0.00, rgba(255,255,255,0.17)),color-stop(0.25, rgba(255,255,255,0.17)),color-stop(0.26, rgba(255,255,255,0)),color-stop(0.50, rgba(255,255,255,0)),color-stop(0.51, rgba(255,255,255,0.17)),color-stop(0.75, rgba(255,255,255,0.17)),color-stop(0.76, rgba(255,255,255,0)),color-stop(1.00, rgba(255,255,255,0))), -webkit-gradient(linear, left bottom, left top, color-stop(0, #F20202), color-stop(1, #B70202));background: -moz-repeating-linear-gradient(top left -30deg, rgba(255,255,255,0.17), rgba(255,255,255,0.17) 15px, rgba(255,255,255,0) 15px, rgba(255,255,255,0) 30px), -moz-linear-gradient(#B70202 0%, #F20202 100%);-webkit-box-shadow: inset 0px 1px 0px 0px #F70202, inset 0px -1px 1px #FF0000;-moz-box-shadow: inset 0px 1px 0px 0px #F70202, inset 0px -1px 1px #FF0000;box-shadow: inset 0px 1px 0px 0px #F70202, inset 0px -1px 1px #FF0000;border: 1px solid #A40101;-webkit-animation: animate-stripes 2s linear infinite;}.ui-progress3 {position: relative;display: block;overflow: hidden;height: 33px;-moz-border-radius: 35px;-webkit-border-radius: 35px;border-radius: 35px;-webkit-background-size: 44px 44px; background-color: #FF6600;background: -webkit-gradient(linear, 0 0, 44 44,color-stop(0.00, rgba(255,255,255,0.17)),color-stop(0.25, rgba(255,255,255,0.17)),color-stop(0.26, rgba(255,255,255,0)),color-stop(0.50, rgba(255,255,255,0)),color-stop(0.51, rgba(255,255,255,0.17)),color-stop(0.75, rgba(255,255,255,0.17)),color-stop(0.76, rgba(255,255,255,0)),color-stop(1.00, rgba(255,255,255,0))), -webkit-gradient(linear, left bottom, left top, color-stop(0, #FF6600), color-stop(1, #CA5001));background: -moz-repeating-linear-gradient(top left -30deg, rgba(255,255,255,0.17), rgba(255,255,255,0.17) 15px, rgba(255,255,255,0) 15px, rgba(255,255,255,0) 30px), -moz-linear-gradient(#CA5001 0%, #FF6600 100%);-webkit-box-shadow: inset 0px 1px 0px 0px #D0711C, inset 0px -1px 1px #FF8820;-moz-box-shadow: inset 0px 1px 0px 0px #D0711C, inset 0px -1px 1px #FF8820;box-shadow: inset 0px 1px 0px 0px #D0711C, inset 0px -1px 1px #FF8820;border: 1px solid #E62D00;-webkit-animation: animate-stripes 2s linear infinite;}.ui-progress span.ui-label {font-size: 1.2em;position: absolute;right: 0;line-height: 33px;padding-right: 12px;color: rgba(0,0,0,0.6);text-shadow: rgba(255,255,255, 0.45) 0 1px 0px;white-space: nowrap;}span.projeler a{position: absolute;top: 10px;left: 10px;color: #333;text-shadow: 1px 1px #CCC}span.projeler2 a{position: absolute;top: 10px;left: 10px;color: #f2f2f2;text-shadow: 1px 1px #333}span.yuzdelik,span.yuzdelik2{position: absolute;top: 10px;right: 10px;color: #333;text-shadow: 1px 1px #CCC;font-size: 15px;}
İlginize çok teşekkür ediyorum. Çok sağolun.
Bu arada sitenizde gördükten sonra acaba modül vs var mıdır diye araştırmaya koyulmuştum.
Görseli çok iyi olmasa da iş görebileceğini tahmin ettiğim bir modülü burdan paylaşmak isterim:
Şahsen denemediğim için kesin kanaat belirtemiyorum.
Progress Bar - Joomla! Extensions Directory (http://extensions.joomla.org/extensions/clients-a-communities/project-a-task-management/5783)
ayrıca ilgili arkadaşlar için şu (http://extensions.joomla.org/extensions/clients-a-communities/project-a-task-management)adreste faydalı olabilir. Tabii bunları test etmek vakitlerini alacaktır.