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

14 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. 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
  3. There's definately a lot to know about this issue. I really like all the points you made.
    best construction company

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

    ReplyDelete
  5. 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
  6. Great and valuable information,Thanks for sharing. Alos visit Amazon.com for unlimited e-commerce products.

    ReplyDelete

  7. I am a help you to resolve yoour quick book error, I am independent expert last 5 year to solve all error of quick book QuickBooks , working dedicatedly with the reliable QuickBooks support provider for resolving QuickBooks errors efficiently.
    Covnert Quickbooks online to quickbooks desktop

    ReplyDelete
  8. Thanks for sharing such great information with us. Very nice and well-explained article. Very fantastic piece of content I see here on your blog, you have put out very vital tips and information for your readers. Thanks for sharing

    tugboat-disposable
    pod-salt-disposable
    disposable vape dubai
    VEIIK MICKO

    ReplyDelete
  9. Very nice post and right to the point. also, see other posts really good content I find here. Thank you. Also, Visit my website
    office furniture dubai

    ReplyDelete

Powered by Blogger.