装载管理 MDB Pro component

加载管理-Bootstrap 5和Material Design 2.0

在加载数据时在容器（例如表）中显示动画。

注意：阅读 API 标签以找到所有可用选项，然后高级定制

基本例子

将class loading 添加到元素时，将自动加载init。载入中自动附加到 body 元素，因此如果您想将加载附加到该元素您已经添加了带有父类或ID的 data-mdb-parent-selector 带有 parentSelector 选项的javascript。

JavaScript初始化

您可以通过以下方式使用JavaScript初始化加载组件： 新加载（元素，选项）。

色彩

您可以使用 text-* 颜色为加载程序设置不同的颜色，例如主要，成功，危险，警告。

定制微调器

MDB增长微调器

如果您不喜欢边框微调器，请切换到增长微调器。虽然没有从技术上讲，它确实会反复增长！

字体很棒

延迟

Switch Delay

HTML
JavaScript


            <div id="test">
              <div class="test-counter"></div>
              <div class="form-check form-switch my-3">
                <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" />
                <label class="form-check-label" for="flexSwitchCheckDefault">Switch Delay</label>
              </div>
            </div>


            const loader = `
              <div id="loading-test-6" style="height: 300px; width: 100%">
                <div class="loading-delay">
                  <div class="spinner-border loading-icon text-succes"></div><span class="loading-text">Loading...</span>
                </div>
              </div>
            `;

            const loader = `
              <div id="loading-test-6" style="height: 300px; width: 100%">
                <div class="loading-delay">
                  <div class="spinner-border loading-icon text-succes"></div>
                    <span class="loading-text">Loading...</span>
                  </div>
              </div>
            `;

            const loader1 = `
              <div class="loading-full">
                <div class="spinner-border loading-icon text-succes"></div>
                <span class="loading-text">Loading...</span>
              </div>
            `;

            const switches = document.querySelector('#flexSwitchCheckDefault');

            let timeleft = 4;

            switches.addEventListener('change', (e) => {
              const test = document.querySelector('#test');

              if (e.target.checked) {
                test.insertAdjacentHTML('beforeend', loader);
                const loadingDelay = document.querySelector('.loading-delay');
                const test1 = document.querySelector('.test-counter');

                const downloadTimer = setInterval(function () {
                  test1.classList.add('h2', 'd-flex', 'justify-content-center', 'align-items-center');
                  if (timeleft <= 0) {
                    clearInterval(downloadTimer);
                    timeleft = 4;
                  }
                  test1.innerHTML = timeleft;

                  timeleft -= 1;
                }, 1000);

                new mdb.LoadingManagement(loadingDelay, {
                  delay: 5000,
                  backdropID: 'delay-backdrop',
                });

                setTimeout(() => {
                  const backdrop = document.querySelector('#delay-backdrop');

                  backdrop.remove();
                  loadingDelay.remove();
                  document.body.style.overflow = '';
                }, 8000);

              } else {
                const loadingDelay = document.querySelector('#loading-test-6');

                loadingDelay.remove();

                document.querySelector('.test-counter').innerHTML = 0;
              }
            });

全屏

装载管理 - API

用法

通过类

HTML


        <div id="loading-test" style="height: 300px; width: 100%">
          <div class="loading" data-mdb-parent-selector="#loading-test">
            <div class="spinner-border loading-icon" role="status"></div>
            <span class="loading-text">Loading...</span>
          </div>
        </div>

通过数据属性

HTML


        <div id="loading-test" style="height: 300px; width: 100%">
          <div class="loading" data-mdb-parent-selector="#loading-test" data-mdb-delay="500" data-mdb-backdrop="false">
            <div class="spinner-border loading-icon" role="status"></div>
            <span class="loading-text">Loading...</span>
          </div>
        </div>

通过JavaScript

JavaScript


        const myLoader = new mdb.LoadingManagement(document.getElementById('myLoader'), options);

通过jQuery

注意：默认情况下，MDB 不包含jQuery，并且您拥有自行添加到项目中。

jQuery


        $('.example-class').loading(options);

Options

Name	Type	Default	Description
`backdrop`	null \|\| boolean	`true`	Set loader backdrop/td>
`backdropColor`	string	`rgba(0, 0, 0)`	Set loader backdrop color
`backdropOpacity`	number \|\| string	`0.4`	Set loader backdrop opacity
`backdropID`	null \|\| number	`''`	Set loader backdrop ID
`delay`	null	`null`	Set deley to show loader
`loader`	string	`''`	Set ID of loader
`parentSelector`	null	`null`	Set parent of loader. It can be every element with class or id
`scroll`	boolean	`true`	Set scroll to backdrop
`loadingText`	boolean	`true`	Set text to loader
`loadingIcon`	boolean	`true`	Set loading icon to lader

方法

Name	Description	Example
`toggle`	Manually toggles a loader	`myLoader.toggle()`

JavaScript


        const myLoader = document.getElementById('myLoaderID');
        const loader = new mdb.LoadingManagement(myLoader);
        loader.toggle();

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入此组件：

JavaScript


        import { Loading } from 'mdb-ui-kit';