JQuery UI Progressbar Example

Jqury UI

Nicesnippets

2821

08-06-2020


JQuery UI Progressbar Example

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">

<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...


Recommended Posts