DEV Community

Muhammad Rauf
Muhammad Rauf

Posted on

How To Create Animated Progress Bar HTML

Image description
When thinking about user experience, one commonly occurring problem is not giving feedback to user input. Any action that your users take should cause a reaction. If your application has long-running tasks, it’s essential to show progress. Otherwise, users will be left confused.

In this tutorial, we will focus on how CSS transitions can be used to create an animated progress bar. I will leave a link to the GitHub repository at the end of the article where the final project is hosted. This is how the progress bar will look like.

To Create Animated Progress Bar It Takes Three Steps Only:-

  1. Make a HTML file and define markup
  2. Make a CSS file and define styling
  3. Make a JavaScript file and define scripting

You can also do it in a single HTML file. Copy the following HTML, CSS and a bit JavaScript code and paste it where you want to show S

HTML Code:

<div class="softprogress">
  <p>Progress Bar to - <strong>90%</strong></p>
  <div code-softprogress="90"></div>
  <p>Progress Bar to - <strong>65%</strong></p>
  <div code-softprogress="65"></div>
  <p>Progress Bar to - <strong>95%</strong></p>
  <div code-softprogress="95"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS Code:

<style type="text/css">
    * {
  font-family: sans-serif;
  font-weight: bold;
}
/* softprogress bar CSS */
.softprogress *:not([code-softprogress]) {
  margin: 5px 0;
  font-size: 16px;
}
.softprogress {
  width: 100%;
  max-width: 500px;
  padding: 15px;
  box-sizing: border-box;
}
.softprogress [code-softprogress] {
  height: 25px;
  box-shadow: 0 0 1px 1px rgba(0, 20, 0, 0.35) inset;
  border-radius: 15px;
  margin: 5px 0 10px 0;
  overflow: hidden;
  background-color: #ddd;
}
[code-softprogress]::after {
  content: "";
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: #2f8d46;
  width: 0;
  height: 100%;
  box-sizing: border-box;
  font-size: 16px;
  color: #fff;
  border-radius: 15px;
  padding: 0 3px;
  transition: 2s;
}
[code-softprogress].run-softprogress::after {
  content: attr(code-softprogress) "%";
  width: var(--run-softprogress);
}
/* End softprogress bar CSS */
</style>
Enter fullscreen mode Exit fullscreen mode

JavaScript Code:

<script type="text/javascript">
    window.onload = function () {
  if (
    document.querySelectorAll(".softprogress").length > 0 &&
    document.querySelectorAll(".softprogress [code-softprogress]").length > 0
  ) {
    document
      .querySelectorAll(".softprogress [code-softprogress]")
      .forEach((x) => runsoftprogress(x));
  }};
function runsoftprogress(el) {
  el.className = "run-softprogress";
  el.setAttribute(
    "style",
    `--run-softprogress:${el.getAttribute("code-softprogress")}%;`
  );}
</script>
Enter fullscreen mode Exit fullscreen mode

That's all, this is how to create animated progress bar using jQuery and CSS.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial. Want to learn in detail you can visit our official website Create Animated Progress Bar HTML

Discussion (0)