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

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more