Here, we are using the jquery ui built library for progress bar UI widget. And we are using the progressbar() method to create the progress bar function. Follow the below example to achieve this.
Example:
Create a html file and add the below snippet to your file. This file contains progress bar script to create progress bar ui.
<!DOCTYPE html>
<html>
<head>
<title>How To Create Progress Bar Using Jquery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$( function() {
$( "#progressbar" ).progressbar({
value: 70
});
} );
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
CSS:
Create an external stylesheet and link it to your html file to view the design.
body {
margin: 50px;
font-family: Arial, sans-serif;
padding: 10px;
background: #fafafa;
}
.ui-widget-header {
background: #4545;
border: 1px solid #333;
}