search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Migrating to v2
      • Internationalization guide
      • Class customization
      • Icons Integration
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Angular
      • ASP.NET
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • Qwik
      • React
      • Remix
      • Solid
      • Svelte
      • SvelteKit
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Autocomplete
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Multi range slider
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Admin Charts
      • Admin Complex
      • Admin Forms
      • Admin Maps
      • Admin Navigation
      • Admin tables
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Stats admin
      • Team
      • Testimonials
    • Tools
      • Button generator
      • Card generator
      • Flexbox generator
      • Footer generator
      • Form builder
      • Grid generator
      • Icon generator
      • Instagram Filters generator
      • Logo generator
      • Table generator
      • Typography generator
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • Resources
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips
    • Overview
    • API

    Tailwind Loading management method

    Tailwind CSS Loading management

    Displays animation in a container (such as a table) while loading data.

    Required ES init: LoadingManagement *
    * UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using TW Elements ES format then you should pass the required components to the initTWE method.

    Basic example

    Loading Management automatically init when you add data-twe-loading-management-init attribute to your element. Loading automatically attach to body element, so if you want attach loading to element you have add data-twe-parent-selector with class or id of your parent or by javascript with parentSelector option.

    Loading...
    • HTML
    • javascript
            
                
          <div id="loading-basic-example" class="h-[300px] w-full">
            <div
              data-twe-loading-management-init
              data-twe-parent-selector="#loading-basic-example">
              <div
                data-twe-loading-icon-ref
                class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-e-transparent motion-reduce:animate-[spin_1.5s_linear_infinite]"
                role="status"></div>
              <span data-twe-loading-text-ref>Loading...</span>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            LoadingManagement,
            initTWE,
          } from "tw-elements";
          
          initTWE({ LoadingManagement });
          
            
        

    Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

    JavaScript init

    You can init loading component with JavaScript.

    Loading...
    • HTML
    • javascript
    • umd
            
                
          <div class="flex w-full justify-center">
            <div id="loading-js" class="h-[300px] w-full">
              <div id="loadingTE">
                <div
                  data-twe-loading-icon-ref
                  class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-e-transparent motion-reduce:animate-[spin_1.5s_linear_infinite]"
                  role="status"></div>
                <span data-twe-loading-text-ref>Loading...</span>
              </div>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import { LoadingManagement } from "tw-elements";
          
          const loadingTE = document.getElementById("loadingTE");
          new LoadingManagement(loadingTE, {
            parentSelector: "#loading-js",
          });
          
            
        
            
                
          const loadingTE = document.getElementById("loadingTE");
          new twe.LoadingManagement(loadingTE, {
            parentSelector: "#loading-js",
          });
          
            
        

    Colors

    You can set a different colors to loader with class customization.

    Loading...
    • HTML
    • javascript
            
                
          <div id="loading-colors" class="h-[300px] w-full">
            <div
              data-twe-loading-management-init
              data-twe-parent-selector="#loading-colors"
              data-twe-class-spinner-color="text-success"
              data-twe-class-backdrop-color="bg-[rgba(0,0,255,0.2)]">
              <div
                data-twe-loading-icon-ref
                class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-e-transparent motion-reduce:animate-[spin_1.5s_linear_infinite]"
                role="status"></div>
              <span data-twe-loading-text-ref>Loading...</span>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            LoadingManagement,
            initTWE,
          } from "tw-elements";
          
          initTWE({ LoadingManagement });
          
            
        

    Custom spinners

    TE Growing spinner

    If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!

    Loading...
    • HTML
    • javascript
            
                
          <div id="loading-growing-spinner" class="h-[300px] w-full">
            <div
              data-twe-loading-management-init
              data-twe-parent-selector="#loading-growing-spinner">
              <div
                data-twe-loading-icon-ref
                class="inline-block h-8 w-8 animate-[spinner-grow_0.75s_linear_infinite] rounded-full bg-current opacity-0 motion-reduce:animate-[spinner-grow_1.5s_linear_infinite]"
                role="status"></div>
              <span data-twe-loading-text-ref>Loading...</span>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            LoadingManagement,
            initTWE,
          } from "tw-elements";
          
          initTWE({ LoadingManagement });
          
            
        

    Custom icon

    You can use various icons to indicate loading status. Here is an example:

    Loading...
    • HTML
    • javascript
            
                
          <div id="loading-custom-icon" class="h-[300px] w-full">
            <div
              data-twe-loading-management-init
              data-twe-parent-selector="#loading-custom-icon">
              <div
                data-twe-loading-icon-ref
                class="inline-block h-8 w-8 animate-spin border-transparent motion-reduce:animate-[spin_1.5s_linear_infinite]"
                role="status">
                <span class="[&>svg]:w-8">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
                  </svg>
                </span>
              </div>
              <span data-twe-loading-text-ref>Loading...</span>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            LoadingManagement,
            initTWE,
          } from "tw-elements";
          
          initTWE({ LoadingManagement });
          
            
        

    Delay

    Use following code to delay the appearance of loading spinner.

    • HTML
    • javascript
    • umd
            
                
          <div id="delay-example" class="dark:text-white">
            <input
              class="me-2 mt-[0.3rem] h-3.5 w-8 appearance-none rounded-[0.4375rem] bg-black/25 before:pointer-events-none before:absolute before:h-3.5 before:w-3.5 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:z-[2] after:-mt-[0.1875rem] after:h-5 after:w-5 after:rounded-full after:border-none after:bg-white after:shadow-switch-2 after:transition-[background-color_0.2s,transform_0.2s] after:content-[''] checked:bg-primary checked:after:absolute checked:after:z-[2] checked:after:-mt-[3px] checked:after:ms-[1.0625rem] checked:after:h-5 checked:after:w-5 checked:after:rounded-full checked:after:border-none checked:after:bg-primary checked:after:shadow-switch-1 checked:after:transition-[background-color_0.2s,transform_0.2s] checked:after:content-[''] hover:cursor-pointer focus:outline-none focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-switch-3 focus:before:shadow-black/60 focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-5 focus:after:w-5 focus:after:rounded-full focus:after:content-[''] checked:focus:border-primary checked:focus:bg-primary checked:focus:before:ms-[1.0625rem] checked:focus:before:scale-100 checked:focus:before:shadow-switch-3 checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] dark:bg-white/25 dark:after:bg-surface-dark dark:checked:bg-primary dark:checked:after:bg-primary"
              type="checkbox"
              role="switch"
              id="flexSwitchCheckDefault" />
            <label
              class="inline-block ps-[0.15rem] hover:cursor-pointer"
              for="flexSwitchCheckDefault"
              >Switch Delay</label
            >
            <div id="counter"></div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import { LoadingManagement } from "tw-elements";
          
          
          const loaderDelay = `
            <div id="loading-wrapper">
             <div id="loading-delay">
              <div
                data-twe-loading-icon-ref
                class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-e-transparent motion-reduce:animate-[spin_1.5s_linear_infinite]"
                role="status"></div>
              <span data-twe-loading-text-ref>Loading...</span>
             </div>
            </div>
          `;
    
          const switches = document.getElementById("flexSwitchCheckDefault");
    
          let timeleft = 4;
    
          switches.addEventListener("change", (e) => {
            const test = document.getElementById("delay-example");
    
            if (e.target.checked) {
              test.insertAdjacentHTML("beforeend", loaderDelay);
              const loadingDelay = document.getElementById("loading-delay");
              const counter = document.getElementById("counter");
    
              const downloadTimer = setInterval(function () {
                counter.classList.add(
                  "text-3xl",
                  "font-semibold",
                  "flex",
                  "justify-center",
                  "items-center"
                );
                if (timeleft <= 0) {
                  clearInterval(downloadTimer);
                  timeleft = 4;
                }
                counter.innerHTML = timeleft;
    
                timeleft -= 1;
              }, 1000);
    
              new LoadingManagement(loadingDelay, {
                delay: 5000,
                backdropID: "delay-backdrop",
              });
    
              setTimeout(() => {
                const backdrop = document.getElementById("delay-backdrop");
    
                backdrop.remove();
                loadingDelay.remove();
                document.body.classList.remove("overflow-hidden");
              }, 8000);
            } else {
              const loadingDelay = document.getElementById("loading-wrapper");
    
              loadingDelay.remove();
    
              document.getElementById("counter").innerHTML = "";
            }
          });
          
            
        
            
                
          const loaderDelay = `
            <div id="loading-wrapper">
             <div id="loading-delay">
              <div
                data-twe-loading-icon-ref
                class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-e-transparent motion-reduce:animate-[spin_1.5s_linear_infinite]"
                role="status"></div>
              <span data-twe-loading-text-ref>Loading...</span>
             </div>
            </div>
          `;
    
          const switches = document.getElementById("flexSwitchCheckDefault");
    
          let timeleft = 4;
    
          switches.addEventListener("change", (e) => {
            const test = document.getElementById("delay-example");
    
            if (e.target.checked) {
              test.insertAdjacentHTML("beforeend", loaderDelay);
              const loadingDelay = document.getElementById("loading-delay");
              const counter = document.getElementById("counter");
    
              const downloadTimer = setInterval(function () {
                counter.classList.add(
                  "text-3xl",
                  "font-semibold",
                  "flex",
                  "justify-center",
                  "items-center"
                );
                if (timeleft <= 0) {
                  clearInterval(downloadTimer);
                  timeleft = 4;
                }
                counter.innerHTML = timeleft;
    
                timeleft -= 1;
              }, 1000);
    
              new twe.LoadingManagement(loadingDelay, {
                delay: 5000,
                backdropID: "delay-backdrop",
              });
    
              setTimeout(() => {
                const backdrop = document.getElementById("delay-backdrop");
    
                backdrop.remove();
                loadingDelay.remove();
                document.body.classList.remove("overflow-hidden");
              }, 8000);
            } else {
              const loadingDelay = document.getElementById("loading-wrapper");
    
              loadingDelay.remove();
    
              document.getElementById("counter").innerHTML = "";
            }
          });
          
            
        

    Full screen

    Use the code below to add spinner for larger content areas or for full-screen loading.

    • HTML
    • javascript
    • umd
            
                
          <div id="full-screen-example">
            <button
              id="btn-full-screen"
              type="button"
              data-twe-ripple-init
              data-twe-ripple-color="light"
              class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
              Full screen
            </button>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            LoadingManagement,
            Ripple,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Ripple });
       
          const loaderFull = `
            <div id="loading-full">
              <div
                data-twe-loading-icon-ref
                class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-e-transparent motion-reduce:animate-[spin_1.5s_linear_infinite]"
                role="status"></div>
              <span data-twe-loading-text-ref>Loading...</span>
            </div>
            `;
    
          const btnfull = document.getElementById("btn-full-screen");
    
          btnfull.addEventListener("click", () => {
            const test2 = document.getElementById("full-screen-example");
            test2.insertAdjacentHTML("beforeend", loaderFull);
    
            const loadingFull = document.getElementById("loading-full");
    
            const loading = new LoadingManagement(loadingFull, {
              scroll: false,
              backdropID: "full-backdrop",
            });
    
            setTimeout(() => {
              loading.dispose();
              document.body.classList.remove("overflow-hidden");
            }, 5000);
          });
          
            
        
            
                
          const loaderFull = `
            <div id="loading-full">
              <div
                data-twe-loading-icon-ref
                class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-e-transparent motion-reduce:animate-[spin_1.5s_linear_infinite]"
                role="status"></div>
              <span data-twe-loading-text-ref>Loading...</span>
            </div>
            `;
    
          const btnfull = document.getElementById("btn-full-screen");
    
          btnfull.addEventListener("click", () => {
            const test2 = document.getElementById("full-screen-example");
            test2.insertAdjacentHTML("beforeend", loaderFull);
    
            const loadingFull = document.getElementById("loading-full");
    
            const loading = new twe.LoadingManagement(loadingFull, {
              scroll: false,
              backdropID: "full-backdrop",
            });
    
            setTimeout(() => {
              loading.dispose();
              document.body.classList.remove("overflow-hidden");
            }, 5000);
          });
          
            
        

    Related resources

    Spinners Animations Icons Infinite scroll Lazy loading Progress
    • Basic example
    • JS INIT
    • Colors
    • Custom
    • TE Growing
    • Custom icon
    • Delay
    • Full screen
    • Related resources

    Tailwind Loading management method - API


    Import

    Importing components depends on how your application works. If you intend to use the TW elements ES format, you must first import the component and then initialize it with the initTWE method. If you are going to use the UMD format, just import the tw-elements package.

    • javascript
    • umd
            
                
            import { LoadingManagement, initTWE } from "tw-elements";
            initTWE({ LoadingManagement });
            
            
        
            
                
            import "tw-elements";
            
            
        

    Usage

    Via data attributes

    Simply add data-twe-loading-management-init attribute to the element to initialize the Loading Management component. For ES format, you must first import and call the initTWE method.

    • HTML
            
                
            <div id="loading-example" class="h-[300px] w-full">
              <div
                data-twe-loading-management-init
                data-twe-parent-selector="#loading-example">
                ...
              </div>
            </div>
            
            
        

    Via JavaScript

    • javascript
    • umd
            
                
            const myLoadingManagement = new LoadingManagement(document.getElementById('example'), options, classes);
            
            
        
            
                
            const myLoadingManagement = new twe.LoadingManagement(document.getElementById('example'), options, classes);        
            
            
        

    Options

    Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-twe-, as in data-twe-backdrop="".

    Name Type Default Description
    backdrop Null / Boolean true Set loader backdrop.
    backdropID Null / String / Number null Set loader backdrop ID.
    delay Null / Number 0 Set delay to show loader.
    loader Null / String / Number "" Set ID of loader.
    loadingIcon Boolean true Set loading icon to loader.
    loadingText Boolean true Set text to loader.
    parentSelector Null / String null Set parent of loader. It can be every element with class or id.
    scroll Boolean true Set scroll to backdrop.

    Classes

    Custom classes can be passed via data attributes or JavaScript. For data attributes, append the class name to data-twe-class, as in data-twe-class-spinner-color="text-success dark:text-success-400".

    Name Default Description
    backdrop w-full h-full fixed top-0 left-0 bottom-0 right-0 z-30 Set backdrop classes.
    backdropColor bg-black/40 Set backdrop color classes.
    loadingSpinner absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] flex flex-col justify-center items-center text-primary dark:text-primary-400 z-40 Set loading spinner classes.
    spinnerColor text-primary Set spinner color classes.

    Methods

    Method Description Example
    dispose Manually deletes an instance of Loading Management. myLoadingManagement.dispose()
    getInstance Static method which allows you to get the Loading Management instance associated to a DOM element. LoadingManagement.getInstance(myLoadingManagementEl)
    getOrCreateInstance Static method which returns the Loading Management instance associated to a DOM element or create a new one in case it wasn't initialized. LoadingManagement.getOrCreateInstance(myLoadingManagementEl)
    • javascript
    • umd
            
                
            const myLoadingManagementEl = document.getElementById('myLoadingManagement');
            const loadingManagement = new LoadingManagement(myLoadingManagementEl);
            loadingManagement.dispose();
            
            
        
            
                
            const myLoadingManagementEl = document.getElementById('myLoadingManagement');
            const loadingManagement = new twe.LoadingManagement(myLoadingManagementEl);
            loadingManagement.dispose();
            
            
        

    Events

    Event type Description
    show.twe.loadingManagement This event fires immediately after showing loading management.
    • JavaScript
            
                
            const myLoadingManagementEl = document.getElementById('example')
            myLoadingManagementEl.addEventListener('show.twe.loadingManagement', function (e) {
                // do something...
            })
            
            
        
    • Import
    • Usage
    • Options
    • Classes
    • Methods
    • Events
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2024 Copyright: MDBootstrap.com

    Access restricted

    To view this section you must have an active PRO account

    Log in to your account or purchase an TWE subscription if you don't have one.

    Buy TWE PRO