Progress Bar

Developer
Yang Li
Size
2,261 Kb
Views
52,624
  1. Progress Bar Previews
  2. Progress Bar HTML Codes
  3. Progress Bar CSS Codes
  4. Progress Bar JS Codes

How do I make an progress bar?

What is a progress bar? How do you make a progress bar? This script and codes were developed by Yang Li on 13 July 2022, Wednesday.

Progress Bar Previews
IQ Test

Progress Bar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Progress Bar</title> <link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="percentage">0%</div>
<div id="bar"> <div id="progress"></div>
</div>
<div id="colors"> <button id="red">Red</button> <button id="blue">Blue</button> <button id="green">Green</button>
</div>
<button id="start">START</button> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Progress Bar - Script Codes CSS Codes

* { font-family: 'VT323', monospace;
}
#percentage { width: 100%; text-align: center; font-size: 3em; margin-top: 300px;
}
#bar { width: 500px; height: 50px; border: 1px solid black; border-radius: 25px; margin: 0 auto;
}
#progress { height: 100%; border-radius: 25px; background-color: grey; width: 10%;
}
#colors { display: flex; width: 100%; justify-content: center; align-items: center; height: 50px;
}
#colors button { margin: 10px; width: 9%; height: 60%; font-size: 1.2em
}
#red { color: red;
}
#blue { color: blue;
}
#green { color: green;
}
#start { display: block; margin: 0 auto; width: 200px; height: 40px; font-size: 1.1em;
}

Progress Bar - Script Codes JS Codes

// Students write all Javascript code in this project
$("#red").click(function(){ $("#progress").css("background-color", "red")
});
$("#blue").click(function(){ $("#progress").css("background-color", "blue")
});
$("#green").click(function(){ $("#progress").css("background-color", "green")
});
// The progress bar effect
$("#start").click(function(){ $("#progress").css("width", "12%") .delay(1200) .animate({width: "25%"}, 500) .delay(1200) .animate({width: "50%"}, 500) .delay(1200) .animate({width: "75%"}, 500) .delay(1200) .animate({width: "100%"}, 500); // Updating percentages (discuss why we have to .queue) $("#percentage").html("0%") .delay(1700) .queue(function(next) { $(this).html("25%"); next(); }) .delay(1700) .queue(function(next) { $(this).html("50%"); next(); }) .delay(1700) .queue(function(next) { $(this).html("75%"); next(); }) .delay(1700) .queue(function(next) { $(this).html("100%"); next(); })
})
Progress Bar - Script Codes
Progress Bar - Script Codes
Home Page Home
Developer Yang Li
Username aussieyang
Uploaded July 13, 2022
Rating 3
Size 2,261 Kb
Views 52,624
Do you need developer help for Progress Bar?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Yang Li (aussieyang) Script Codes
Name
Animated Clock
Googly Eye
Hamburger Menu Starter
Battleships Starter
Animated Clock Starter
Sunny Day Driving Starter
Battleships Starter v2
My Friends Starter
Responding Boxes Starter
CSS Photoframe
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!