CSS Skill Bars

This project demonstrates how to create animated skill bars using HTML and CSS. These skill bars are perfect for personal portfolios, resumes, or any web page where you want to showcase different skill levels visually.

Demo

You can see a live demo of the project here.

Features

• Animated Skill Bars: Skill bars animate to the specified percentage, providing a dynamic and engaging visual effect.
• Customizable: Easily adjust the skill names, levels, colors, and animation speed to fit your design needs.
• Pure CSS: The effect is achieved using only HTML and CSS, without any JavaScript, ensuring fast loading times and compatibility across browsers.

Installation

To use this project, simply download or clone the repository:

git clone https://github.com/logusivam/CSS_Skill_Bars.git

Alternatively, you can directly copy the HTML and CSS code into your project files.

Usage

1. Include the CSS in your HTML file:

<link rel="stylesheet" href="skill.css" type="text/css" />

2. Add the following HTML structure for the skill bars:

<div class="skill">
        
        
        <li>
            <h3>html</h3><p>90%</p>
            <span class="bar"><span class="html"></span></span>
            
        </li>
            <li>
                <h3>css</h3><p>100%</p>
                <span class="bar"><span class="css"></span></span>
            </li>
            <li>
                <h3>php</h3><p>70%</p>
                <span class="bar"><span class="php"></span></span>
            </li>
            <li>
                <h3>javascript</h3><p>80%</p>
                <span class="bar"><span class="javascript"></span></span>
            </li>
       
    </div>

3. Customize the design and animation in the style.css file as needed.

Contributing

Contributions are welcome! If you find any bugs or have suggestions for improvements, please open an issue or submit a pull request.