Skill Bar Using HTML & CSS

Animated Progress Bar for Portfolio Website

A Skill Bar is a popular UI component used in portfolio websites to visually represent skill levels. In this tutorial, you will learn how to create an animated Skill Bar using only HTML and CSS, without using any JavaScript.

This project is perfect for beginners who want to improve their CSS animation and UI design skills.

Tools & Resources That Support My Web Development Work

Discover the exact hardware and services I use daily — from laptops and keyboards to hosting and domains.

1. Video Tutorial – Skill Bar Design

If you prefer visual learning, you can follow the complete video tutorial where the Skill Bar is designed step by step using pure HTML and CSS.

In the tutorial, you will learn:

HTML structure for skill sections
CSS styling and animation effects
How to create smooth progress animations

2. HTML Structure – Skill Section Layout

The HTML structure includes:

Skill container
Skill name (e.g., HTML, CSS, JavaScript)
Progress bar background
Progress bar fill element

Each skill has its own progress bar that represents the percentage visually.

👇 Place your complete HTML code below this section.

Tip: Use semantic structure and clean class names for better readability.

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skill Bar | CodeByGaurav</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
</head>
<body>
    <div class="skill-box">
        <div class="title">Technical Mastery</div>

        <div class="bar">
            <div class="info">
                <span><i class="fa-brands fa-html5"></i> HTML5</span>
            </div>
            <div class="track">
                <div class="fill" style="--w:95%; --clr:#ff4d4d; --delay:0.1s;">
                    <span class="tooltip">95%</span>
                </div>
            </div>
        </div>

        <div class="bar">
            <div class="info">
                <span><i class="fa-brands fa-css3-alt"></i> CSS3</span>
            </div>
            <div class="track">
                <div class="fill" style="--w:90%; --clr:#2196f3; --delay:0.3s;">
                    <span class="tooltip">90%</span>
                </div>
            </div>
        </div>

        <div class="bar">
            <div class="info">
                <span><i class="fa-brands fa-js"></i> JavaScript</span>
            </div>
            <div class="track">
                <div class="fill" style="--w:75%; --clr:#ffeb3b; --delay:0.5s;">
                    <span class="tooltip">75%</span>
                </div>
            </div>
        </div>

        <div class="bar">
            <div class="info">
                <span><i class="fa-brands fa-react"></i> React JS</span>
            </div>
            <div class="track">
                <div class="fill" style="--w:70%; --clr:#00d8ff; --delay:0.7s;">
                    <span class="tooltip">70%</span>
                </div>
            </div>
        </div>

    </div>
</body>
</html>

3. CSS Styling – Animated Progress Bars

CSS is used to:

Design the progress bar background
Set different width percentages
Add smooth animation using @keyframes
Apply gradient colors and modern styling

Animations make the skill bars load smoothly when the page opens.

👇 Add your complete CSS code here.

				
					:root {
    --bg-color: #080808;
    --card-bg: rgba(255, 255, 255, 0.05);
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-color);
    overflow: hidden;
}

/* main card */
.skill-box {
    width: 420px;
    padding: 40px;
    background: var(--card-bg);
    border-radius: 30px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
    transition:
        transform 0.4s ease,
        border-color 0.4s ease;
}

.skill-box:hover {
    transform: translateY(-10px) rotateX(5deg);
    border-color: rgba(255, 255, 255, 0.2);
}

.title {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
    background: linear-gradient(to right, #fff, #888);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Progress bar */
.bar {
    margin-bottom: 35px;
    position: relative;
}

.info {
    color: #ccc;
    font-size: 15px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    letter-spacing: 0.5px;
}

.info i {
    font-size: 20px;
    margin-right: 12px;
}

.track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    position: relative;
}

.fill {
    height: 100%;
    width: 0;
    background: var(--clr);
    border-radius: 20px;
    position: relative;
    box-shadow: 0 0 20px var(--clr);
    animation: grow 2s cubic-bezier(0.17, 0.67, 0.83, 0.67) forwards;
    animation-delay: var(--delay);
}

/* Tooltip */
.tooltip {
    position: absolute;
    right: -15px;
    top: -35px;
    background: var(--clr);
    color: #000;
    font-size: 12px;
    font-weight: 800;
    padding: 3px 8px;
    opacity: 0;
    animation: fadeIn 0.5s forwards;
    animation-delay: calc(var(--delay) + 1.5s);
}

.tooltip::before {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--clr);
}

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

@keyframes fadeIn {
    to{
        opacity: 1;
        transform: translateY(-5px);
    }
}

4. Key Features of This Skill Bar

Built using only HTML & CSS
Smooth loading animation
Clean and modern UI
Beginner-friendly code
Fully responsive design

Conclusion

In this tutorial, you learned how to create an Animated Skill Bar using HTML and CSS. This component is perfect for portfolio websites and helps visually represent your expertise.
You can enhance this project by adding:
- Hover effects
- Dark mode version
- Scroll-based animation trigger
- Gradient or glassmorphism design
For more HTML & CSS UI projects, follow CodeByGaurav 🚀