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

Stock Market using Python

 "The stock market is a device for transferring money from the impatient to the patient." - Warren Buffett Today we'll look into few ways for accessing the stock market. And we'll do this using Python ! Now, as we know that there are 2 stock exchange in India; BSE and NSE So we'll get the data from both! To begin with let's access the data from BSE first. (P.S: I certainly like the 2nd and the 3rd method to access stock market!) * So, to import the BSE data we need to " pip install bsedata ". => And then import the module, => Create an object to store the Driver Class => Then we need to do " getQuote('script_code')" where we need to provide a script code of a company which we need to access. Just like here we have given; => And from here we can see that the script code was for the company named "V-MART". But we can't remember all the script code hence we need to download this script file from the BSE websi...
Post a Comment
Read more

Predicting whether the bank will give loan to its customers based on their credit score (Logistic Regression)

"The best thing about data is that it tells a story." - Naveen Jain Today let's have a look at another machine learning model know as Logistic Regression. Logistic Regression is a statistical model where the outcome is predicted as binary such as YES or NO, based on the previous/train_dataset. ( Please open the images in a new tab or try to zoom-in ) import required models read your dataframe visualize your dataset create Logistic Regression model split your data into train and test dataset fit your train dataset into the regression model predict future values visualize your predicted values Github link for pdf:  click here
Post a Comment
Read more

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