Link copied!

Busy Indicator Examples

<e-busy-indicator active="active" size="small" inline></e-busy-indicator>
<e-busy-indicator active="active" inline></e-busy-indicator>
<e-busy-indicator active="active" size="large" inline></e-busy-indicator>
<e-busy-indicator active="active" inline="inline" text="Loading data from backend server...">
  <div style="height: 200px; width: 200px;"></div>
</e-busy-indicator>
<e-busy-indicator active="active" inline="inline" text="Loading data from backend server..." text-placement="top">
  <div style="height: 200px; width: 200px;"></div>
</e-busy-indicator>
<e-busy-indicator active="active" text="Loading data from backend server...">
  <e-datagrid data="[{&quot;name&quot;:&quot;John&quot;,&quot;surname&quot;:&quot;Lennon&quot;,&quot;role&quot;:&quot;singer&quot;,&quot;band&quot;:&quot;The Beatles&quot;,&quot;editDisabled&quot;:false,&quot;deleteDisabled&quot;:true,&quot;editDisabledTooltip&quot;:&quot;Lennon cannot be edited&quot;,&quot;editUrl&quot;:&quot;http://example.com/edit?name=Lennon&quot;,&quot;followers&quot;:123456,&quot;income&quot;:56789.123,&quot;practice&quot;:0.0913,&quot;birthday&quot;:&quot;1940-10-09T07:30&quot;,&quot;editVisibility&quot;:false,&quot;duration&quot;:3,&quot;priority&quot;:2},{&quot;name&quot;:&quot;Ringo&quot;,&quot;surname&quot;:&quot;Starr&quot;,&quot;role&quot;:&quot;drums&quot;,&quot;band&quot;:&quot;The Beatles&quot;,&quot;editDisabled&quot;:true,&quot;deleteDisabled&quot;:false,&quot;editDisabledTooltip&quot;:&quot;Starr cannot be edited&quot;,&quot;editUrl&quot;:&quot;http://example.com/edit?name=Starr&quot;,&quot;followers&quot;:2345,&quot;income&quot;:56435.1,&quot;practice&quot;:0.111,&quot;birthday&quot;:&quot;1940-07-07T18:00&quot;,&quot;editVisibility&quot;:true,&quot;duration&quot;:80,&quot;priority&quot;:1},{&quot;name&quot;:&quot;George&quot;,&quot;surname&quot;:&quot;Harrison&quot;,&quot;role&quot;:&quot;guitar&quot;,&quot;band&quot;:&quot;The Beatles&quot;,&quot;editDisabled&quot;:true,&quot;deleteDisabled&quot;:false,&quot;editDisabledTooltip&quot;:&quot;Harrison cannot be edited&quot;,&quot;editUrl&quot;:&quot;http://example.com/edit?name=Harrison&quot;,&quot;followers&quot;:3456,&quot;income&quot;:51234,&quot;practice&quot;:0.1228,&quot;birthday&quot;:&quot;1943-02-25T05:39&quot;,&quot;editVisibility&quot;:false,&quot;duration&quot;:1600,&quot;priority&quot;:3},{&quot;name&quot;:&quot;Paul&quot;,&quot;surname&quot;:&quot;McCartney&quot;,&quot;role&quot;:&quot;bass&quot;,&quot;band&quot;:&quot;The Beatles&quot;,&quot;editDisabled&quot;:false,&quot;deleteDisabled&quot;:true,&quot;editDisabledTooltip&quot;:&quot;McCartney cannot be edited&quot;,&quot;editUrl&quot;:&quot;http://example.com/edit?name=McCartney&quot;,&quot;followers&quot;:4567,&quot;income&quot;:52347,&quot;practice&quot;:0.084,&quot;birthday&quot;:&quot;1942-06-18T11:00&quot;,&quot;editVisibility&quot;:false,&quot;duration&quot;:3601,&quot;priority&quot;:4}]">
    <e-datagrid-column head="Name" content-key="name"></e-datagrid-column>
    <e-datagrid-column head="Surname" content-key="surname"></e-datagrid-column>
    <e-datagrid-column head="Role" content-key="role"></e-datagrid-column>
  </e-datagrid>
</e-busy-indicator>
<e-busy-indicator active>
  <div class="e-layout e-layout-fullheight e-layout-without_navigation">
    <header class="e-layout__header">
      <a class="e-layout__back" href="#">
        <e-layout-back-button>Go to Page Title</e-layout-back-button>
      </a>
      <h1 class="e-layout__title">Page Title Goes Here</h1>
      <div class="e-layout__actions">
        <button class="e-layout__action e-btn e-btn-primary" type="button">Primary Action</button>
        <button class="e-layout__action e-btn" type="button">Button</button>
      </div>
    </header>
    <main class="e-layout__content">
      <section class="e-layout__section">
        <e-tab-bar vertical fullheight>
          <e-tab label="Tab One" icon="user">
            <e-tab-content>
              <div class="e-section">
                <div class="e-section__header">
                  <div class="e-section__title">Heading</div>
                  <div class="e-section__actions">
                    <button class="e-btn e-btn-borderless e-section__action" type="button">Button</button>
                    <button class="e-btn e-btn-borderless e-section__action" type="button">Button</button>
                  </div>
                </div>
                <div class="e-section__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum.</div>
              </div>
            </e-tab-content>
          </e-tab>
          <e-tab label="Tab Two" icon="mobile" disabled>
            <e-tab-content>
              <div class="e-section">
                <div class="e-section__header">
                  <div class="e-section__title">Heading Goes Here</div>
                  <div class="e-section__actions">
                    <button class="e-btn e-btn-borderless e-section__action" type="button">Button</button>
                    <button class="e-btn e-btn-borderless e-section__action" type="button">Button</button>
                  </div>
                </div>
                <div class="e-section__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum.</div>
              </div>
            </e-tab-content>
          </e-tab>
          <e-tab label="Tab Three" icon="e-track" badge="5">
            <e-tab-content>
              <div class="e-section">
                <div class="e-section__header">
                  <div class="e-section__title">Track Page</div>
                  <div class="e-section__actions">
                    <button class="e-btn e-btn-borderless" type="button">Button</button>
                  </div>
                </div>
                <div class="e-section__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum.</div>
              </div>
            </e-tab-content>
          </e-tab>
        </e-tab-bar>
      </section>
      <section class="e-layout__section">
        <div class="e-section">
          <div class="e-section__header">
            <div class="e-section__title">Heading Goes Here</div>
            <div class="e-section__actions">
              <button class="e-btn e-btn-borderless" type="button">Button</button>
            </div>
          </div>
          <div class="e-section__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odio sequi consectetur perspiciatis, voluptate! Quasi velit ad, mollitia maxime doloribus est! Asperiores cupiditate illum non distinctio deleniti dolorem impedit. Eum.</div>
        </div>
      </section>
    </main>
  </div>
</e-busy-indicator>
New AI Feature!

Try our new AI skill to implement designs easier and faster with guided generation and best-practice patterns. For more info, visit this page.