How to Create Skill Bar With Html Css & jQurey I Create Amazing Skill Bar
I Create Amazing Skill Bar With Html Css & jQurey............
Code......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>skill bar</title>
<style>
.container {
max-width: 900px;
margin: 60px auto;
}
h2 {
margin-top: 0;
color: #0080ff;
}
.skill_row {
width: 100%;
background-color: lightgray;
height: 15px;
border-radius: 10px;
position: relative;
}
.skill_row_percent {
position: absolute;
left: 0;
top: 0;
height: 100%;
/* width: 50%; */
background:#0080ff;
border-radius: 10px;
}
.skill_row_percent_view {
position: absolute;
left: 100%;
bottom: 100%;
background: #0080ff;
line-height: 20px;
font-size: 14px;
padding: 0 5px;
border-radius: 5px;
margin-bottom: 5px;
color: #ffffff;
}
.skill_row_percent_view::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-top: 5px solid #0080ff;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
</style>
</head>
<body>
<div class="container">
<h2>HTML/CSS</h2>
<div class="skill_row">
<div class="skill_row_percent">
<div class="skill_row_percent_view">90%</div>
</div>
</div>
<br>
<br>
<br>
<h2>NODE.JS</h2>
<div class="skill_row">
<div class="skill_row_percent">
<div class="skill_row_percent_view">50%</div>
</div>
</div>
<br>
<br>
<br>
<h2>JAVASCRIPT/jQUREY</h2>
<div class="skill_row">
<div class="skill_row_percent">
<div class="skill_row_percent_view">70%</div>
</div>
</div>
<br>
<br>
<br>
<h2>WORDPRESS</h2>
<div class="skill_row">
<div class="skill_row_percent">
<div class="skill_row_percent_view">95%</div>
</div>
</div>
<br>
<br>
<br>
<h2>EXPRESS.JS</h2>
<div class="skill_row">
<div class="skill_row_percent">
<div class="skill_row_percent_view">80%</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="
anonymous"></script>
<script>
$(document).ready(function(){
$(window).on('load',function(event){
$('.skill_row_percent_view').each(function(){
thisval= $(this).text();
$(this).parent('.skill_row_percent').animate({width:thisval},2000)
});
});
})
</script>
</body>
</html>
No comments