កូដ CSS Progress Bar មាន​ចលនាសម្រាប់​លើ​ជាមួយ Blogger

នេះ​ជា​កូដ Progress Bar (បក​ប្រែ​តាម Google ថា : របារវឌ្ឍនភាព) ដែល​អាច​យក​មក​ប្រើ​ផ្ទាល់​ក្នុង​អត្ថបទ ឬ​ទី​កន្លែង​នានា​ក្នុង Bloggger បាន ដោយ​មិន​បាច់​ដាក់​​កូដ​ចូល​ក្នុង Template នោះ​ទេ។ Progress Bar តែងតែ​ឃើញ​ប្រើ​សម្រាប់​គេហទំព័រ​ដែល​ផ្ដល់​សេវាកម្ម សម្រាប់​បង្ហាញ​ពី​កម្រិត ឬ​បទពោសោធន៍​លើ​អ្វី​មួយ ដែល​​បង្ហាញ​ជា​ស្ទីល​របារ​មាន​ពណ៌​ផ្សេង ឬ​អាច​មាន​ជា​ភាគ​រយ​ក្នុង​នោះ​ផង​ដែរ តែ​ក្នុង​គន្លឹះ​នេះ​ខ្ញុំ​បង្ហាញ​តែ Progress Bar ធម្មតាៗ មាន​រចលនា យើង​ហើយ​អាច​ប្ដូរ​ពណ៌ និង​ល្បឿន​ចលនា​បាន​ខ្លះៗ។

៙ របៀប​ដាក់​កូដ ៖

ជំហាន​ទី​១ : ចូល​ក្នុង​គណនី Blogger.com របស់​លោក​​អ្នក
ជំហាន​ទី​២ : ចូល​ទៅ​បង្កើត​ Post ថ្មី​មួយ
ជំហាន​ទី​៣ : ត្រូវ​ឈរ​លើ​តាប ​HTML ដើម្បី​ដាក់​កូដ
ជំហាន​ទី​៤ : ចម្លង​កូដ​ខាង​ក្រោម​នេះ​​ដាក់​ចូល និង​កែប្រែ​កូដ​ខ្លះៗ ​ជា​ការ​ស្រេច ។

កូដ

<div class="contentContainer">

  <div class="skillBar"><h4>Adobe Photoshop</h4><div class="skillBarContainer"><div class="skillBarValue value-70"></div></div></div>

  <div class="skillBar"><h4>Adobe Illustrator</h4><div class="skillBarContainer"><div class="skillBarValue value-50"></div></div></div>
  
  <div class="skillBar"><h4>Adobe XD</h4><div class="skillBarContainer"><div class="skillBarValue value-60"></div></div></div>
  
  <div class="skillBar"><h4>CorelDraw</h4><div class="skillBarContainer"><div class="skillBarValue value-40"></div></div></div>
  
 </div>

<style>
.contentContainer {
  background:#efefef;
  padding: 5px 20px 5px 20px;
  max-width:100%;
  min-width:150px;
  margin:0px;
  border-radius:15px;
}

/*///////////////////////////////////////////////////
    // Skill Bars \\ 
///////////////////////////////////////////////////*/
.skillBar {
  margin-bottom:26px;
  margin-bottom: 1.66em;
}
.skillBarContainer {
  width: 100%;
  max-width: auto;
  height:26px;
  height: 1.66em;
  background: #e6eae3;
  overflow: hidden;
  border-radius:15px;
}
.skillBarValue {
  height: 1.66em;
  float: left;
  background:#053eff;
  border-radius: 0px;
}

/* Allowed values for the css skill bars */
.value-00  { width: 0;    }
.value-10  { width: 10%;  }
.value-20  { width: 20%;  }
.value-30  { width: 30%;  }
.value-40  { width: 40%;  }
.value-50  { width: 50%;  }
.value-60  { width: 60%;  }
.value-70  { width: 70%;  }
.value-80  { width: 80%;  }
.value-90  { width: 90%;  }
.value-100 { width: 100%; }

/*///////////////////////////////////////////////////
    // Animation \\ 
///////////////////////////////////////////////////*/
@-webkit-keyframes slideIn {
  0% { width: 0; }
  25% { width:100%; }
  100% { width: normal; }
}
@-moz-keyframes slideIn {
  0% { width: 0; }
  25% { width:100%; }
  100% { width: normal; }
}
@-ms-keyframes slideIn {
  0% { width: 0; }
  25% { width:100%; }
  100% { width: normal; }
}
@-o-keyframes slideIn {
  0% { width: 0; }
  25% { width:100%; }
  100% { width: normal; }
}
@keyframes slideIn {
  0% { width: 0; }
  25% { width:100%; }
  100% { width: normal; }
}
.skillBarValue {
  -webkit-animation: slideIn 10s;
  -moz-animation: slideIn 10s;
  -o-animation: slideIn 10s;
  animation: slideIn 10s;
}
</style>

កន្លែង​កែ​កូដ​ខ្លះៗ៖
- #053eff : ពណ៌​របស់​របារ
- slideIn 10s : ល្បឿន​របស់​របារ ប្ដូរ 10s ទៅ​ជា 5s ដើម្បី​ឲ្យ​លឿន​ជាង​មុន។

Tags: Blogger

Share: