jQuery UI - Progress Bars

Question

1 Answer

Best answer

There are different elements in modern websites that have different functionalities and that make specific tasks on a website simple and even more striking and pleasing to the eye, making the navigability of the site and the usability that is given to the user extremely important. optimum

Progress Bars

The progress bars are responsible for showing the progress of a task such as a transfer or upload of a file, loading information, etc.

The progressbar () method

The progressbar () method declares that an element of the HTML must be managed and treated in the form of a progress bar. The options of the same are an object that specifies the behavior and the appearance of this.
The progressbar () method can be used in two ways:

â€¢ $ (selector, context) .progressbar (options)
â€¢ $ (selector, context) .progressbar ("action", params)

Let's see an example of the use of it:

First we include the necessary files, the jQuery libraries as well as the CSS :

<link rel = "stylesheet" href = " http: //code.jquery.c.../jquery-ui.css" />
<script src = " http: //code.jquery.c...1.js"> </ script>

<script src = " http: //code.jquery.c...i.js"> </ script>

<link rel = "stylesheet" href = "/ resources / demos / style.css" />

We add some styles for the labels and the bar as such:

<style>
.ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</ style>

Instanciamos our method progressbar () we associate it with a container and additionally we add some events to detect when the upload or transfer is in progress and finally when it has been completed:

<script>
$ ( function () {
var progressbar = $ ("#progressbar"),
progressLabel = $ (".progress-label");

progressbar.progressbar ({
value: false,
change: function () {
progressLabel.text (progressbar.progressbar ("value") + "%");
},
complete: function () {
progressLabel.text ("Complete!");
}
});

function progress () {
var = progressbar.progressbar ("value") || 0;

progressbar.progressbar ("value", val + 1);

if (val <99) {
setTimeout (progress, 100);
}
}

setTimeout (progress, 3000);
});
</ script>

Finally we add our HTML code and the <div> tags where our progress bar will be displayed:

<body>
<div id = "progressbar"> <div class = "progress-label"> Loading ... </ div> </ div>
</ body>

The implementation of our code would look like this in the browser:

Finally here we leave the complete code so you can try it for yourselves, without forgetting that we can try different options, events and even styles for our progress bar.

<! doctype html>

<html lang = "en">
<head>
<meta charset = "utf-8" />
<title> jQuery UI Progressbar - Custom Label </ title>
<link rel = "stylesheet"
href = " http: //code.jquery.c.../jquery-ui.css" />
<script src = " http: //code.jquery.c...1.js"> </ script>
<script src = " http: //code.jquery.c...i.js"> </ script>
<link rel = "stylesheet" href = "/ resources / demos / style.css" />
<style>
.ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</ style>
<script>
$ ( function () {
var progressbar = $ ("#progressbar"),
progressLabel = $ (".progress-label");

progressbar.progressbar ({
value: false,
change: function () {
progressLabel.text (progressbar.progressbar ("value") + "%");
},
complete: function () {
progressLabel.text ("Complete!");
}
});

function progress () {
var = progressbar.progressbar ("value") || 0;

progressbar.progressbar ("value", val + 1);

if (val <99) {
setTimeout (progress, 100);
}
}

setTimeout (progress, 3000);
});
</ script>
</ head>
<body>

<div id = "progressbar"> <div class = "progress-label"> Loading ... </ div> </ div>

</ body>
</ html>

answered Jun 23, 2019 by stackoverflow (3.5m points)
edited Jun 23, 2019

jQuery UI - Progress Bars

Your answer

1 Answer

Your comment on this answer:

Related questions