Skip to content

vikaskumar098/Download-Progress-UI

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🎵 Download Progress UI - DOM Project

This is a DOM-based interactive project where users can simulate downloading a file with a dynamic progress bar, glowing animation message, and a fullscreen looping video background.

A smooth blend of JavaScript DOM manipulation, CSS animations, and modern UI design. 🚀


🌟 Features

✔️ Animated download progress bar

✔️ Random download duration

✔️ Glowing “Download Complete” effect

✔️ Button disables during download

✔️ Glassmorphism card design

✔️ Fullscreen looping video background

✔️ Smooth & responsive UI


📂 Project Structure

DOM-TASK-2/
│── index.html
│── style.css
│── script.js
│── musicvideo.mp4

🧠 How It Works

🔹 Click Download button

🔹 A random time between 5–10 seconds is generated

🔹 Progress bar updates from 0% → 100%

🔹 Button becomes inactive during progress

🔹 After completion, shows Download Complete ✔️


🛠️ Technologies Used

  • HTML5
  • CSS3
  • JavaScript (DOM Manipulation)
  • Video Background
  • Keyframe Animations


📥 Installation

git clone https://github.com/vikaskumar098/DOM-TASK-2.git
cd DOM-TASK-2

Open index.html in your browser.


💡 What I Learned

✨ DOM updates using JavaScript

✨ Dynamic progress bar creation

✨ setInterval() & setTimeout() handling

✨ UI/UX improvement with animations

✨ Video as background

✨ Button state control


👨‍💻 Author

Vikas Kumar

🔗 LinkedIn: https://www.linkedin.com/in/vikas0905/

🔗 GitHub: https://github.com/vikaskumar098


⭐ Support

If you found this helpful:

✔️ Star ⭐ the repo

✔️ Follow for more DOM + JS projects


About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors