Progress Bar Animation | Progress Bar Html Css Javascript

Progress Bar Animation | Progress Bar Html Css Javascript

Welcome🎉 to Code With Random blog. This blog teaches us how we create a Progress Bar Animation. We use HTML, Css, and javascript for the Progress Bar Animation. I hope you enjoy our blog so let’s start with a basic HTML structure for the Progress Bar Animation. 

HTML Code

<html lang="en">

<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>Progress Bar</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="progress">
        <div class="bar"></div>
    </div>
 
    <script src="app.js"></script>
</body>

</html>

There is all the HTML code for the Progress Bar Animation. Now, you can see an output with a Progress Bar Animation  then we write Css & javascript for the Progress Bar Animation.

Output

Progress Bar Html
Progress Bar Html Output(Blank Output because All Html Tag Empty)

CSS Code

body {
  background: black;
}

.progress {
  --progress: 0%;
  
  width: 500px;
  height: 50px;
  margin: 9em auto;
  border: 1px solid #fff;
  padding: 12px 10px;
  box-shadow: 0 0 10px #aaa;
}

.progress .bar {
  width: var(--progress);
  height: 100%;
  background: linear-gradient(gold, #c85, gold);
  background-repeat: repeat;
  box-shadow: 0 0 10px 0px orange;
  animation: 
    shine 4s ease-in infinite,
    end 1s ease-out 1 7s;
  transition: width 3s ease 3s;
}

@property --progress {
  syntax: "<length>";
  initial-value: 0%;
  inherits: true;
}

@keyframes shine {
  0% { background-position: 0 0; }
  100% { background-position: 0 50px; }
}

@keyframes end {
  0%, 100% { box-shadow: 0 0 10px 0px orange; }
  50% { box-shadow: 0 0 15px 5px orange; }
}

Css Updated output

Progress Bar Css

Javascript Code

"use strict";

const bar = document.querySelector(".bar");
setTimeout(() => {
  bar.style.setProperty("--progress", "75%");
}, 500);

Final output

Progress Bar Css

Now that we have completed our javascript section, our updated output with javascript. I hope you like the Progress Bar Animation. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!

This post teaches us how to create a Progress Bar Animation using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

Code By – Manz!

Check out more…..

1. 50 front-end projects html Css

2. add to cart button

3. quiz app javascript

Share on:

Leave a Comment