JQuery UI Progressbar Example

Admin   Jquery   376  2021-03-14 03:10:04

In this blog,I will teach you create prograssbar using jquery ui.Progressbar specifies the completion percentage of an operation or progress.The progressbar (options) method specifies that an HTML element can be managed in the form of a progress bar.

Exanple :

 

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>jQuery UI Progressbar</title>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" target="_blank" rel="nofollow" >

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<style type="text/css">

.ui-progressbar-value{

background-color: #008A8B;

}

#progressbar{

width: 50%;

margin: 30px auto;

}

</style>

</head>

<body>

<h1 align="center">JQuery UI Progressbar - NiceSnippets.com</h1>

<div id="progressbar"></div>

<script>

$( function() {

$( "#progressbar" ).progressbar({

value: 40

});

});

</script>

</body>

</html>

It will help you...