DEV Community

Cover image for Progress Bar with Percentage
CodingFlicks
CodingFlicks

Posted on

1

Progress Bar with Percentage

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>

Enter fullscreen mode Exit fullscreen mode
* {
    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;
}

Enter fullscreen mode Exit fullscreen mode

For the Original Post CLICK HERE

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more