Custom Progress Bar with Percentage

byCodingFlicks -November 23, 2023

0

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. If you like the contents of our YouTube channel, please subscribe to our channel.

Video Tutorial:

Hope you have seen the above video tutorial on progress bar UI. 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. The percentage values used here provide a brief 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.

The data-percentage attribute of the container element named "progress-container" is set to '70', indicating the initial percentage value. Inside this, we have taken another div named 'progress' which indicates how much is complete, and the 'percentage' div is taken to show the value in the percentage above. Watch the video tutorial above to learn how these divs are styled in CSS.

You May Also Like:

Custom Progress Bar with Percentage [ Source Code ]:

To create this static progress bar with a percentage snippet, first create the HTML and then the CSS file. Then copy the code from the code box below and paste it into your project. Save the code and open it in the browser, if you face a problem then download the code from the download button below.

ADD HTML:

<!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>

ADD CSS:

* {
	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;
}

Hope this simple progress bar with percentage snippet is working well. Since this website element helps manage visitors' expectations and reduces uncertainty, you can keep it in your next website design. Click the Load More button on the homepage to collect other snippets of our website. Thanks for visiting the website.

DOWNLOAD SOURCE CODE

Please do not enter any spam link in the comment box.