Your search did not match any results.
Load Panel

Overview

Documentation
The LoadPanel is an overlay widget notifying the viewer that loading is in progress.
Copy to Codepen
Apply
Reset
var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { $scope.employeeInfo = {}; $scope.loadingVisible = false; $scope.closeOnOutsideClick = false; $scope.showIndicator = true; $scope.showPane = true; $scope.shading = true; $scope.loadOptions = { shadingColor: "rgba(0,0,0,0.4)", position: { of: "#employee" }, bindingOptions: { visible: "loadingVisible", showIndicator: "showIndicator", showPane: "showPane", shading: "shading", closeOnOutsideClick: "closeOnOutsideClick" }, onShown: function(){ setTimeout(function () { $scope.$apply(function() { $scope.loadingVisible = false; }); }, 3000); }, onHidden: function(){ $scope.employeeInfo = employee; } }; $scope.showLoadPanel = function(){ $scope.employeeInfo = {}; $scope.loadingVisible = true; }; });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.win10.white.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C\/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/16.2.6/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type ="text/css" href ="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container" ng-app="DemoApp" ng-controller="DemoController"> <div id="container"> <h1>John Heart</h1> <div dx-button="{ text: 'Load Data', onClick: showLoadPanel }"></div> <div id="employee" ng-init="employeeInfo"> <p> Birth date: <b>{{employeeInfo.Birth_Date}}</b> </p> <p class="address"> Address:<br /> <b>{{employeeInfo.City}}</b><br /> <span>{{employeeInfo.Zipcode}}</span> <span>{{employeeInfo.Address}}</span> </p> <p> Phone: <b>{{employeeInfo.Mobile_Phone}}</b><br /> Email: <b>{{employeeInfo.Email}}</b> </p> </div> <div class="loadpanel" dx-load-panel="loadOptions"></div> <div class="options"> <h2>Options:</h2> <div dx-check-box="{ text: 'With indicator', bindingOptions: { value: 'showIndicator' } }"> </div> <div dx-check-box="{ text: 'With overlay', bindingOptions: { value: 'shading' } }"></div> <div dx-check-box="{ text: 'With pane', bindingOptions: { value: 'showPane' } }"></div> <div dx-check-box="{ text: 'Close on outside click', bindingOptions: { value: 'closeOnOutsideClick' } }"></div> </div> </div> </div> </body> </html>
h1 { display: inline-block; vertical-align: middle; padding: 10px; } #employee { margin: 20px 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-top: 1px solid lightgray; border-bottom: 1px solid lightgray; } #employee > p { padding: 10px 20px; } .address { height: 60px; } .options { padding: 10px; } .options .dx-checkbox { display: block; margin-top: 10px; }
var employee = { "Full_Name":"John Heart", "Title":"CEO", "Birth_Date":"03/16/1964", "Prefix":"Mr.", "Address":"351 S Hill St.", "City":"Los Angeles", "Zipcode":90013, "Email":"jheart@dx-email.com", "Skype":"jheart_DX_skype", "Home_Phone":"(213) 555-9208", "Mobile_Phone":"(213) 555-9392" };