ads_header

Create Example Skill Progress Bar With HTML CSS




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

10 comments:

  1. The toll free number is Quickbooks Support Phone Number +1 888-210-4052 and you need to dial that number for your queries and errors issues.

    ReplyDelete
  2. Thanks for sharing your blog. In this Blog you have given an Informative Information which are very important for users.

    Shared Hosting Plans

    Managed Service Provider

    Unmanaged Servers

    Minecraft Server Hosting

    ReplyDelete
  3. Thanks for sharing your blog. In this Blog you have given Informative Information which is very important for users. cPanel Web Hosting is a sort of hosting service that is powered by cPanel, the industry-leading control panel. Users may utilize the cPanel platform to conduct daily administration chores like creating and maintaining email accounts, setting mail forwarding, and changing passwords. Users may also upload and manage data, build and download backup archives from their websites, set up and administer FTP, add-on domains, and security measures.

    ReplyDelete
  4. We are software development company mumbai provides android app development, web development services and serves our services from Dubai & Toronto, for best web designing company visit creativewebo.

    ReplyDelete
  5. There's definately a lot to know about this issue. I really like all the points you made.
    best construction company

    ReplyDelete
  6. Nice information and thanks for sharing about HTML and CSS coding

    ReplyDelete
  7. If you are looking for contact information for QuickBooks, then be sure to give them a call at Quickbooks Customer Service +1 866-669-5068.

    ReplyDelete
  8. Great and valuable information,Thanks for sharing. Alos visit Amazon.com for unlimited e-commerce products.

    ReplyDelete

Powered by Blogger.