Animated Skill bar using HTML and CSS

byCodingFlicks -December 07, 2023

0

Animated Skill Bar is a visual representation of the website through which the progress of a task or skill level is shown. Many portfolio and business websites use animated skill bars, or progress bars, or loading bars. Skill bar animations are used to display the skill level of an individual or organization. Today we will design an animated skill bar with HTML and CSS. There is a how-to video on 'progress bar CSS' below. Check it out before collecting the code and don't forget to subscribe to our Channel if you like our video content.

Video Tutorial:

Hope you have watched the video tutorial. An animated skill bar is very useful in representing the skill level of a person or entity. These skills include programming languages, design tools, and other skills. An animated skill bar is a clear and visually engaging way for a viewer to assess the skills of an individual or organization. Thus, the user can quickly and effortlessly understand the person's abilities.

Animated CSS progress bars like this are a more visual and effective way to represent skill levels on a website than static skill bars. CSS Animation is a powerful tool for creating beautiful animations. Our snippet today used CSS keyframe animation to animate the progress bar. We have four skills skill bars taken in this snippet. When a visitor refreshes the webpage, the skill bars will animate one after the other.

You May Also Like:

Animated Skill bar using HTML and CSS [ Source Code ]:

Create an HTML and CSS file to create this animated skill bar snippet. Then copy the code from the code box below and paste it into your project files to see if it works. If not, download the source code by clicking the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
     <!-- codingflicks.com -->
<head>
    <title>Animated Skill bar UI Design using HTML and CSS</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">    
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="skill-area">
            <h2>Animated Skillbar</h2>
            <div class="box">
                <div class="content">
                    <span>Graphics Design</span>
                    <span>85%</span>
                </div>
                <div class="line-area">
                    <div id="line-1"></div>
                </div>
            </div>
            <div class="box">
                <div class="content">
                    <span>Web Design</span>
                    <span>95%</span>
                </div>
                <div class="line-area">
                    <div id="line-2"></div>
                </div>
            </div>
            <div class="box">
                <div class="content">
                    <span>Photography</span>
                    <span>75%</span>
                </div>
                <div class="line-area">
                    <div id="line-3"></div>
                </div>
            </div>
            <div class="box">
                <div class="content">
                    <span>Travelling</span>
                    <span>90%</span>
                </div>
                <div class="line-area">
                    <div id="line-4"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

ADD CSS:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: deepskyblue;
    font-family: montserrat;
    font-weight: 700;
}
.wrapper {
	width: 45%;
	min-width: 550px;
	position: absolute;
	transform: translate(-50%,-50%);
	left: 50%;
	top: 50%;
}
.skill-area {
	width: 100%;
	padding: 50px 30px;
	border-radius: 10px;
	box-shadow: 0 20px 30px rgba(0,0,0,0.2);
	background: #fff;
}
.skill-area h2{
    margin-bottom: 40px;
    letter-spacing: 2px;
}
.box:not(:last-child){
    margin-bottom: 30px;
}
.content{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.line-area {
	position: relative;
	background-color: deepskyblue;
	padding: 10px;
}
.line-area div{
    position: relative;
    width: 0;
    height: 5px;
    background-color: #fff;
    border: 1px solid #fff;
}
#line-1{
    animation: ani-1 2s forwards;
}
@keyframes ani-1{
    100%{
        width: 85%;
    }
}
#line-2{
    animation: ani-2 2s forwards;
}
@keyframes ani-2{
    100%{
        width: 95%;
    }
}
#line-3{
    animation: ani-3 2s forwards;
}
@keyframes ani-3 {
    100%{
        width: 75%;
    }
}
#line-4{
    animation: ani-4 2s forwards;
}
@keyframes ani-4{
    100%{
        width: 90%;
    }
}

An animated skill bar is a nice feature on a website that is commonly used on portfolio websites. This type of CSS progress bar creates a lasting impression on visitors. We hope you liked this CSS animation example. Explore the website further by clicking the Load More button on the homepage to get more such source code. Thanks for visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.