5

How To Create Animated Progress Bar HTML

 2 years ago
source link: https://dev.to/softcodeon/how-to-create-animated-progress-bar-html-218o
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How To Create Animated Progress Bar HTML

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK