ads_header

Home HTML CSS Create Example Skill Progress Bar With HTML CSS VIEWS

Create Example Skill Progress Bar With HTML CSS

March 04, 2020
Read


Hello guys, this tutorial I will create a parameter of someone's expertise (individual) in the form of a progress bar horziontal. There are many types of progress bars that we can make, but this can also be a reference and inspiration for developers, especially beginners.





Now, create a project folder and add the index.html and style.css files in it. If so, open index.html and enter the following code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Skill Progress Bar</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="center">
       <h1>Programming Language Skill</h1>
       <div class="skillbox">
           <p>Python</p>
           <p>95%</p>
           <div class="skill">
               <div class="skill_level" style="width: 95%"></div>
           </div>
       </div>

       <div class="skillbox">
           <p>PHP</p>
           <p>82%</p>
           <div class="skill">
               <div class="skill_level" style="width: 82%"></div>
           </div>
       </div>

       <div class="skillbox">
           <p>Java</p>
           <p>77%</p>
           <div class="skill">
               <div class="skill_level" style="width: 77%"></div>
           </div>
       </div>

       <div class="skillbox">
           <p>SQL</p>
           <p>56%</p>
           <div class="skill">
               <div class="skill_level" style="width: 56%"></div>
           </div>
       </div>
    </div>
</body>
</html>

Next, open style.css and enter the following code

body
{
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background: #282828;
}

.center{
    position: absolute;
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 20px;
    background: #333;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0,0,0,.5);
}

h1{
    margin: 0;
    padding: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.skillbox{
    box-sizing: border-box;
    width: 100%;
    margin: 20px 0;
}

.skillbox p{
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 10px;
    padding: 0;
    font-weight: bold;
    letter-spacing: 1px;
}

.skillbox p:nth-child(2){
    float: right;
    position: relative;
    top: -25px;
}

.skill{
    background: #282828;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid #0fffb7;
    border-radius: 2px;
}

.skill_level{
    background: #0fffb7;
    width: 100%;
    height: 10px;
}

Save all files and run index.html
Tags :
Powered by Blogger.