Cara Membuat Desain UI Skills Bar menggunakan HTML dan CSS

Pada artikel ini, analiswinter.com akan membahas bagaimana cara membuat desain UI Skills Bar yang cantik menggunakan HTML dan CSS, dilengkapi dengan animasi progres dan persentase untuk memberikan tampilan yang lebih profesional. Yuk, kita mulai!

Apa Itu Skills Bar?

Skills Bar adalah komponen UI yang sering digunakan untuk menunjukkan keahlian seseorang dalam berbagai bidang, seperti HTML, CSS, atau JavaScript. Desain ini sangat populer pada portofolio web developer karena mudah dipahami dan memberikan gambaran visual tentang kemampuan yang dimiliki.

Langkah_Langkah Membuat Skills Bar

Berikut adalah langkah-langkah untuk membuat desain Skills Bar yang interaktif:

1. Struktur HTML

Struktur dasar HTML untuk Skills Bar terdiri dari elemen div yang merepresentasikan nama skill, bar, dan tingkat keahlian. Contoh kode HTML:

<div class="skills-section">
    <h1>My Skills</h1>
    <div class="skill">
        <span class="skill-name">HTML</span>
        <div class="skill-bar">
            <div class="skill-level" data-percent="90%"></div>
        </div>
    </div>
    <div class="skill">
        <span class="skill-name">CSS</span>
        <div class="skill-bar">
            <div class="skill-level" data-percent="80%"></div>
        </div>
    </div>
    <div class="skill">
        <span class="skill-name">JavaScript</span>
        <div class="skill-bar">
            <div class="skill-level" data-percent="75%"></div>
        </div>
    </div>
    <div class="skill">
        <span class="skill-name">Python</span>
        <div class="skill-bar">
            <div class="skill-level" data-percent="85%"></div>
        </div>
    </div>
</div>

Pada kode ini, setiap skill memiliki atribut data-percent untuk menampilkan nilai persentase yang akan dianimasikan.

2. Styling Dengan CSS

Berikut adalah kode CSS untuk membuat tampilan Skills Bar yang estetik:

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.skills-section {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 500px;
    text-align: center;
}

.skill {
    margin-bottom: 20px;
    text-align: left;
}

.skill-name {
    font-weight: bold;
    margin-bottom: 5px;
}

.skill-bar {
    background: #e0e0e0;
    border-radius: 8px;
    height: 20px;
    overflow: hidden;
    position: relative;
}

.skill-level {
    background: linear-gradient(90deg, #6a11cb, #2575fc);
    height: 100%;
    border-radius: 8px;
    width: 0;
    animation: loadSkill 2s ease-out forwards;
    position: relative;
}

.skill-level::after {
    content: attr(data-percent);
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #fff;
}

@keyframes loadSkill {
    to {
        width: var(--width);
    }
}

3. Menambahkan Animasi Dengan JavaScript

Untuk mengatur nilai persentase animasi, tambahkan kode JavaScript berikut:

document.querySelectorAll('.skill-level').forEach(skill => {
    const percent = skill.getAttribute('data-percent');
    skill.style.setProperty('--width', percent);
});

4. Menggabungkan Semuanya

Gabungkan file HTML, CSS, dan JavaScript di atas, lalu buka file HTML di browser. Hasilnya adalah Skills Bar interaktif dengan animasi progres dan persentase.

Tips Desain Skills Bar

1. Gunakan Warna Gradien: Memberikan tampilan lebih modern.
2. Tambahkan Hover Effect: Agar lebih interaktif.
3. Responsif: Pastikan desainnya terlihat bagus di semua perangkat.

Kesimpulan

Dengan mengikuti langkah-langkah di atas, kalian dapat membuat UI Skills Bar yang interaktif, responsif, dan estetik. Skills Bar seperti ini sangat cocok untuk ditambahkan pada portofolio kalian untuk memberikan kesan profesional.

Itulah tadi artikel dari analiswinter.com, jika ada hal yang ingin kalian tanyakan, bisa langsung ke kolom komentar.