A visual element used to represent the completion status of any task on a website is called a progress bar. This visual element provides a visual signal to the user of the ongoing process. The examples of Completion status of a task include loading a webpage, uploading a file, etc. A progress bar can be dynamically presented to the user. In this blog post, we will design a simple static progress bar with percentages using HTML and CSS. The video tutorial below shows the process of creating this snippet. Watch the video before collecting the source code.
Our today's snippet is an effective visual element to demonstrate proficiency levels in various technologies or skills. This element can be used to showcase a person's skills on any personal portfolio website. For example, indicating HTML proficiency as 98%, CSS as 95%, and JavaScript as 90% provides website visitors with a quick visual summary of any developer's skill set.
You May Also Like:
The percentage values used here provide a summary of a person's strengths. Besides, the static progress bar with a percentage element is very important due to the Visual Appeal, User Engagement, Transparency, Professionalism, Efficiency, etc. of a website. Since this website element helps manage visitors' expectations and reduces uncertainty, you can keep it in your next website design.
<!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->
<head>
<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>Custom Progress bar with percentage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="progress-container" data-percentage='70'>
<div class="progress"></div>
<div class="percentage">75%</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
min-height: 100vh;
margin: 0;
background: deepskyblue;
}
.progress-container {
box-shadow: 0 4px 5px rgb(0, 0, 0, 0.1)
}
.progress-container, .progress {
background-color: #ffffff;
border-radius: 50px;
position: relative;
height: 14px;
width: 500px;
}
.progress {
background-color: #212121;
width: 75%;
transition: width 0.4s linear;
}
.percentage {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 4px 5px rgb(0, 0, 0, 0.5);
color: #212121;
font-size: 15px;
padding: 4px;
position: absolute;
top: 25px;
left: 75%;
transform: translateX(-50%);
width: 40px;
text-align: center;
transition: left 0.4s linear;
}
.percentage::after {
background-color: #fff;
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
height: 15px;
width: 15px;
z-index: -1;
}
For the Original Post CLICK HERE
Top comments (0)