امروز کدی رو بهتون معرفی میکنیم که میتونید درصد پیشرفت پروژه های خودتون رو به صورت انیمیشنی زیبا در سایت یا وبلاگ خودتون قرار بدید.

با سلام خدمت شما بازدید کنندگان سایت ایتــــ سافتـــــ

امروز کدی رو بهتون معرفی میکنیم که میتونید درصد پیشرفت پروژه های خودتون رو به صورت انیمیشنی زیبا در سایت یا وبلاگ خودتون قرار بدید.

حال برای گذاشتن این اسکریپت زیبا و جذاب بر روی وبلاگ یا سایت خود مراحل زیر را سپری کنید.

  1. لینک جاوا اسکریپت که در باکس شماره  1  قرار داریم رو توی ویرایش قالب در بالا قبل از تگ <head/> قرار دهید.
  2. کد جاوا اسکریپت را از باکس  2  کپی کرده و در ویرایش قالب خود بین دو تگ <script></script> و قبل از تگ<head/> در بالا قرار دهید.
  3. کدهای css را از از باکس  3  کپی کرده و در ویرایش css قالب خود قرار دهید.
  4. ودر آخر کدهای Html را از باکس  4  کپی کرده و در جایی که میخواهید استفاده کنید قرار دهید.

امیدوارم بتونید به راحتی از این اسکریپت استفاده کنید.

اگر در اجرای این اسکریپت دچار مشکل شدید میتونید از فرم زیر سوالات خودتون رو بپرسید تا سریعا به شما جواب داده شود .

هیچ وقت برای پیشرفت دیر نیست.

موفق باشید

یا علی

  • باکس 1

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  • باکس2

    jQuery(document).ready(function(){
      jQuery('skillbar').each(function(){
        jQuery(this).find('.skillbar-bar').animate({
          width:jQuery(this).attr('data-percent')
        },6000);
      });
    });
  • باکس3

    body{
      font-family:'Ubuntu',sans-serif;
      width:960px;

    p{
      color:#525252;
      font-size:12px;
    }

    .skillbar {
      position:relative;
      display:block;
      margin-bottom:15px;
      width:100%;
      background:#eee;
      height:35px;
      border-radius:3px;
      -moz-border-radius:3px;
      -webkit-border-radius:3px;
      -webkit-transition:0.4s linear;
      -moz-transition:0.4s linear;
      -ms-transition:0.4s linear;
      -o-transition:0.4s linear;
      transition:0.4s linear;
      -webkit-transition-property:width, background-color;
      -moz-transition-property:width, background-color;
      -ms-transition-property:width, background-color;
      -o-transition-property:width, background-color;
      transition-property:width, background-color;
    }

    .skillbar-title {
      position:absolute
      top:0;
      left:0;
      width:110px;
      font-weight:bold;
      font-size:13px;
      color:#ffffff;
      background:#6adcfa;
      -webkit-border-top-left-radius:3px;
      -webkit-border-bottom-left-radius:3px;
      -moz-border-radius-topleft:3px;
      -moz-border-radius-bottomleft:3px;
      border-top-left-radius:3px;
      border-bottom-left-radius:3px;
    }

    .skillbar-title span {
      position:block
      background:rgba(0, 0, 0, 0.1);
      padding:0 20px;
      height:35px;
      line-height:35px;
      -webkit-border-top-left-radius:3px;
      -webkit-border-bottom-left-radius:3px;
      -moz-border-radius-topleft:3px;
      -moz-border-radius-bottomleft:3px;
      border-top-left-radius:3px;
      border-bottom-left-radius:3px;
    }

    .skillbar-bar {
      height:35px;
      width:0;
      background:#6adcfa;
      border-radius:3px;
      -moz-border-radius:3px;
      -webkit-border-radius:3px;
    }

    .skill-bar-percent {
      position:bsolute
      right:10px;
      top:0;
      font-size:11px;
      height:35px;
      line-height:35px;
      color:#ffffff;
      color:rgba(0, 0, 0, 0.4);
    }
  • باکس4

    <-- Start Skill Bar -->
    <div class="skillbar clearfix" data-percent="20%">
      <div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
      <div class="skillbar-bar" style="background: #e67e22;"></div>
      <div class="skill-bar-percent">20%</div>
    </div> <-- End Skill Bar -->

    <-- Start Skill Bar -->
    <div class="skillbar clearfix" data-percent="25%">
      <div class="skillbar-title" style="background: #2980b9;"><span>CSS3</span></div>
      <div class="skillbar-bar" style="background: #3498db;"></div>
      <div class="skill-bar-percent">25%</div>
    </div> <-- End Skill Bar -->

    <-- Start Skill Bar -->
    <div class="skillbar clearfix" data-percent="50%">
      <div class="skillbar-title" style="background: #2c3e50;"><span>jQuery</span></div>
      <div class="skillbar-bar" style="background: #2c3e50;"></div>
      <div class="skill-bar-percent">50%</div>
    </div> <-- End Skill Bar -->

    <-- Start Skill Bar -->
    <div class="skillbar clearfix" data-percent="80%">
      <div class="skillbar-title" style="background: #46465e;"><span>PHP</span></div>
      <div class="skillbar-bar" style="background: #5a68a5;"></div>
      <div class="skill-bar-percent">80%</div>
    </div> <-- End Skill Bar -->