Geri Dön

Yetenek (Skill) Barı Tooltip

İlerleme Çubukları (0-100) / 3 Görüntülenme

Favoriye Ekle

Canlı Önizleme

C# Yeteneği
90%

Nasıl Kullanılır?

Yüzdeyi ayarlamak için `.skill-per` divindeki `max-width` stil değerini ve tooltipten gözüken yüzde yazısını kendi sisteminize entegre edebilirsiniz.

Kaynak Kodlar

HTML

<div class="skill-box">
  <span class="skill-name">C# Yeteneği</span>
  <div class="skill-bar">
    <div class="skill-per" style="max-width: 90%;">
      <span class="skill-tooltip">90%</span>
    </div>
  </div>
</div>

CSS

.skill-box { width: 100%; max-width: 400px; font-family: 'Inter', sans-serif; margin: 20px 0; }
.skill-name { display: block; font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 5px; }
.skill-bar { height: 10px; background: #2a2a35; border-radius: 8px; position: relative; }
.skill-per { position: relative; height: 100%; border-radius: 8px; background: #ff4757; animation: fill-skill 1.5s ease-out forwards; width: 0; box-shadow: 0 0 10px rgba(255, 71, 87, 0.4); }
.skill-tooltip { position: absolute; right: -15px; top: -30px; background: #fff; color: #1a1a24; font-size: 11px; font-weight: bold; padding: 4px 6px; border-radius: 4px; opacity: 0; animation: show-tip 0.5s 1.5s forwards; }
.skill-tooltip::before { content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px; background: #fff; }
@keyframes fill-skill { 0% { width: 0; } 100% { width: 100%; } }
@keyframes show-tip { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }