jQuery LoadingPanel Setup

Home >Shield UI Documentation >LoadingPanel >JavaScript >jQuery LoadingPanel Setup

The loadingpanel widget is a visual element that provides support for displaying a pop-up indicator over a target element and preventing the end user to interact with the target element while loading.

In order to be able to use it, you will need to first include a reference to the required scripts:

<!DOCTYPE html>
<html>
<head>
<title>Shield LoadingPanel</title>
<meta charset="utf-8" />

<link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>

</head>
<body>

...

</body>
</html>

A typical declaration for the loading panel looks like this:

    <div style="width: 500px; height: 500px" id="loadingpanel">
            Lorem Ipsum është një tekst shabllon i industrisë së printimit dhe shtypshkronjave. 
Lorem Ipsum ka qenë teksti shabllon i industrisë që nga vitet 1500, kur një shtypës i 
panjohur morri një galeri shkrimesh dhe i ngatërroi për të krijuar një libër mostër. Teksti i
 ka mbijetuar jo vetëm pesë shekujve, por edhe kalimit në shtypshkrimin elektronik, duke 
ndenjur në thelb i pandryshuar. U bë i njohur në vitet 1960 me lëshimin e letrave 'Letraset' që 
përmbanin tekstin Lorem Ipsum, e në kohët e fundit me aplikacione publikimi si Aldus
 PageMaker që përmbajnë versione të Lorem Ipsum.
    </div>


 <script type="text/javascript">
     $(function () {
         $("#loadingpanel1").shieldLoadingPanel({
             text: "loading..."
         });

         $("#loadingpanel1").swidget().show();

     });

</<script>

The result of the above code will be:
overview