Skip to main content

Progress bar using HTML/CSS

(switch to desktop mode for better experience)

 #html code:

<!DOCTYPE html>
<html lang="en">

<head>
    <link href='E:\html\testpro\style.css' rel='stylesheet'>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>progress bar</title>
</head>

<body>
    <div class="box">
        <h1><u>progress bar</u>:</h1>
        <h2 id='h1'>c</h2>
            <span class='c' id='bar1'></span>
        <h2 id='h2'>c++</h2>
            <span class='cpp' id='bar2'></span>
        <h2 id='h3'>python</h2>
            <span class='python' id='bar3'></span>
        <h2 id='h4'>html</h2>
            <span class='html' id='bar4'></span>
        <h2 id='h5'>css</h2>
            <span class='css' id='bar5'></span>
        <h2 id='h6'>javascript</h2>
            <span class='javascript' id='bar6'></span>
        <h2 id='h7'>database</h2>
            <span class='database' id='bar7'></span>
    </div>
</body>

</html>

#css code:

*{
    margin: 0;
    padding: 0;
}

body{
    background: #02115c;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box{
    position: absolute;
    width: 500px;
    top: 10%;
}

h1{
    color: #fff;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-transform: uppercase;
}

h2{
    color: #fff;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 2em;
    text-transform: capitalize;
    line-height: 80px;
}

#bar1{
    display: block;
    top: 15%;
    height: 2px;
    background: aquamarine;
    animation: animate1 3s;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 8px 3px aquamarine;
}
#bar2{
    display: block;
    height: 2px;
    background: aqua;
    animation: animate2 3s;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 8px 3px aqua;
}
#bar3{
    display: block;
    height: 2px;
    background: greenyellow;
    animation: animate3 3s;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 8px 3px greenyellow;
}
#bar4{
    display: block;
    height: 2px;
    background: orange;
    animation: animate4 3s;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 8px 3px orange;
}
#bar5{
    display: block;
    height: 2px;
    background: #ff44009b;
    animation: animate5 3s;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 8px 3px #ff44009b;
}
#bar6{
    display: block;
    height: 2px;
    background: yellow;
    animation: animate6 3s;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 8px 2px yellow;
}
#bar7{
    display: block;
    height: 2px;
    background: red;
    animation: animate7 3s;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 8px 2px red;
}

.c{
    width: 20%;
}
.cpp{
    width: 30%;
}
.python{
    width: 50%;
}
.html{
    width: 70%;
}
.css{
    width: 75%;
}
.javascript{
    width: 60%;
}
.database{
    width: 95%;
}

@keyframes animate1{
    from{
        width: 0%;
    }
    to{
        width: 20%;
    }
}
@keyframes animate2{
    from{
        width: 0%;
    }
    to{
        width: 30%;
    }
}
@keyframes animate3{
    from{
        width: 0%;
    }
    to{
        width: 50%;
    }
}
@keyframes animate4{
    from{
        width: 0%;
    }
    to{
        width: 70%;
    }
}
@keyframes animate5{
    from{
        width: 0%;
    }
    to{
        width: 75%;
    }
}
@keyframes animate6{
    from{
        width: 0%;
    }
    to{
        width: 60%;
    }
}
@keyframes animate7{
    from{
        width: 0%;
    }
    to{
        width: 95%;
    }
}


==>> Click on the video to see the output...
(Plz adjust the quality of the video for better experience)

You can directly copy the code and run it on your editor window.
(Feel free to comment down your queries and suggestions if you have any)
Labels:

Comments

Post a Comment

Popular posts from this blog

Machine Learning model for predicting 'Salary' of an Employee based on 'YearsofExperience'

“ Data really powers everything that we do .” — Jeff Weiner In the 21st century, Data is one of the most valuable entity anyone can have! There is loads-and-loads of data generated everyday. And to process this huge amount of data we need people who have expertise in it, who by the way are called as Data Engineers. Data Engineer collects the raw data, process it for further use; but we need an Analytic process which will automatically predict the data based on the previous one. And here's how 'Machine Learning' comes into the picture. "Machine Learning allows us to make highly accurate predictions based on the Historical Dataset which is used to train the machine learning model." Today let us look at a similar ML model to predict the 'Salary' of Employees based on 'YearsofExperience'. (P.S: I've provided pdf link at the very bottom of this page for clear understanding) 1) import the required modules 2) read the csv file 3) plot the graph 4) us...
Post a Comment
Read more

Introduction to SQL

 Q.)  What is SQL ? Ans.) SQL(Structured Query Language) is a standardized language to communicate with the database.  With the help of it we can retrieve data from the database. SQL not only allows us to read the data but also allows us to write the data in the database.  Data in the database is stored in the form of tables. We can Select, Insert, Update, Delete, Create, Alter, Drop and can perform many more operations on the table. And these are called as SQL Statements. * SQL Statements are classified mainly into 4 categories :- 1) DML (Data Manipulation Language) 2) DDL (Data Definition Language) 3) DCL (Data Control Language) 4) TCL (Transaction Control Language) * Under DML we have :-(No Autocommit) 1. Select  2. Insert  3. Update  4. Delete  5. Merge    * Under DDL :-(Allows Autocommit) 1. Create 2. Alter  3. Drop  4. Truncate  5. Flashback * Under DCL :-(Allows Autocommit) 1. Grant  2. Revoke  * Under T...
Post a Comment
Read more

Slicing in Python

  * Let's first understand how a slicing is been done-- Consider a string namely==>> string = 'python_developer!' If we print this then-- #  Output: python_developer! >> Now lets do some slicing here-- print (string[0:17:2]) >> Then the-- # Output: pto_eeoe! >> Lets see how it works-- So basically the print statement is in the form of  print(string[a:b:c]) >>  Now here   --           a: Starting position b: Ending position c: Steps taken >> If we take out length of the given string then-- print (len(string)) # Output: 17 * The total length of the given string is 17. Therefore in our given problem the string will be printed from 0 index to 16 index and would take 2 steps. >> Hence the output-- # Output: pto_eeoe! >> Now the print statement that we have used here is-- print (string[0:17:2]) >> We can also use-- print (string[:17:2]) >> It will give the same output-- ...
Post a Comment
Read more