smart-webcomponents-react/source/styles/default/smart.loader.css

[](https://jqwidgets.com/license/)

.smart-grid .smart-loader,
.smart-list-box .smart-loader,
.smart-list-menu .smart-loader,
.smart-list-menu-view.smart-drop-down-repositioned .smart-loader,
.smart-tree .smart-loader {
  margin: inherit;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.85;
  text-align: left;
  border: 6px solid var(--smart-theme-border);
  box-sizing: border-box;
  background-clip: padding-box;
  border-radius: 50%;
  z-index: 10;
  width: calc(var(--smart-loader-size) + 10px);
  height: calc(var(--smart-loader-size) + 10px);
}
.smart-grid .smart-loader:after, .smart-grid .smart-loader:before,
.smart-list-box .smart-loader:after,
.smart-list-box .smart-loader:before,
.smart-list-menu .smart-loader:after,
.smart-list-menu .smart-loader:before,
.smart-list-menu-view.smart-drop-down-repositioned .smart-loader:after,
.smart-list-menu-view.smart-drop-down-repositioned .smart-loader:before,
.smart-tree .smart-loader:after,
.smart-tree .smart-loader:before {
  content: "";
  position: absolute;
  margin: -6px;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: 1;
  border: inherit;
  border-color: transparent;
  border-top-color: transparent;
  border-width: 6px;
  animation-delay: 0.44s;
  animation: smart-loader-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, smart-loader-spin-fade 1.1s linear infinite;
}
.smart-grid .smart-loader.smart-hidden,
.smart-list-box .smart-loader.smart-hidden,
.smart-list-menu .smart-loader.smart-hidden,
.smart-list-menu-view.smart-drop-down-repositioned .smart-loader.smart-hidden,
.smart-tree .smart-loader.smart-hidden {
  display: none;
}
.smart-grid[loading-indicator-position=center] .smart-loader,
.smart-list-box[loading-indicator-position=center] .smart-loader,
.smart-list-menu[loading-indicator-position=center] .smart-loader,
.smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=center] .smart-loader,
.smart-tree[loading-indicator-position=center] .smart-loader {
  width: calc(var(--smart-loader-size) + 10px);
  height: calc(var(--smart-loader-size) + 10px);
}
.smart-grid[loading-indicator-position=bottom] .smart-loader-container,
.smart-list-box[loading-indicator-position=bottom] .smart-loader-container,
.smart-list-menu[loading-indicator-position=bottom] .smart-loader-container,
.smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=bottom] .smart-loader-container,
.smart-tree[loading-indicator-position=bottom] .smart-loader-container {
  top: -10%;
}
.smart-grid[loading-indicator-position=top] .smart-loader-container,
.smart-list-box[loading-indicator-position=top] .smart-loader-container,
.smart-list-menu[loading-indicator-position=top] .smart-loader-container,
.smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=top] .smart-loader-container,
.smart-tree[loading-indicator-position=top] .smart-loader-container {
  top: 0;
  position: absolute;
  animation: smart-loader-container-pop-up-top 0.3s linear;
}
.smart-grid[loading-indicator-position=top] .smart-loader, .smart-grid[loading-indicator-position=bottom] .smart-loader,
.smart-list-box[loading-indicator-position=top] .smart-loader,
.smart-list-box[loading-indicator-position=bottom] .smart-loader,
.smart-list-menu[loading-indicator-position=top] .smart-loader,
.smart-list-menu[loading-indicator-position=bottom] .smart-loader,
.smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=top] .smart-loader,
.smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=bottom] .smart-loader,
.smart-tree[loading-indicator-position=top] .smart-loader,
.smart-tree[loading-indicator-position=bottom] .smart-loader {
  width: var(--smart-loader-size);
  height: var(--smart-loader-size);
  left: 20%;
}
.smart-grid[loading-indicator-position=top] .smart-loader-container, .smart-grid[loading-indicator-position=bottom] .smart-loader-container,
.smart-list-box[loading-indicator-position=top] .smart-loader-container,
.smart-list-box[loading-indicator-position=bottom] .smart-loader-container,
.smart-list-menu[loading-indicator-position=top] .smart-loader-container,
.smart-list-menu[loading-indicator-position=bottom] .smart-loader-container,
.smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=top] .smart-loader-container,
.smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=bottom] .smart-loader-container,
.smart-tree[loading-indicator-position=top] .smart-loader-container,
.smart-tree[loading-indicator-position=bottom] .smart-loader-container {
  display: block;
  position: relative;
  width: 100%;
  height: 10%;
  background-color: var(--smart-theme);
  color: var(--smart-on-theme);
  overflow: hidden;
  animation: smart-loader-container-pop-up-down 0.3s linear;
}
.smart-grid[loading-indicator-position=top] .smart-loader-container.smart-hidden, .smart-grid[loading-indicator-position=bottom] .smart-loader-container.smart-hidden,
.smart-list-box[loading-indicator-position=top] .smart-loader-container.smart-hidden,
.smart-list-box[loading-indicator-position=bottom] .smart-loader-container.smart-hidden,
.smart-list-menu[loading-indicator-position=top] .smart-loader-container.smart-hidden,
.smart-list-menu[loading-indicator-position=bottom] .smart-loader-container.smart-hidden,
.smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=top] .smart-loader-container.smart-hidden,
.smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=bottom] .smart-loader-container.smart-hidden,
.smart-tree[loading-indicator-position=top] .smart-loader-container.smart-hidden,
.smart-tree[loading-indicator-position=bottom] .smart-loader-container.smart-hidden {
  display: none;
}
.smart-grid[loading-indicator-position=top] .smart-loader-label, .smart-grid[loading-indicator-position=bottom] .smart-loader-label,
.smart-list-box[loading-indicator-position=top] .smart-loader-label,
.smart-list-box[loading-indicator-position=bottom] .smart-loader-label,
.smart-list-menu[loading-indicator-position=top] .smart-loader-label,
.smart-list-menu[loading-indicator-position=bottom] .smart-loader-label,
.smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=top] .smart-loader-label,
.smart-list-menu-view.smart-drop-down-repositioned[loading-indicator-position=bottom] .smart-loader-label,
.smart-tree[loading-indicator-position=top] .smart-loader-label,
.smart-tree[loading-indicator-position=bottom] .smart-loader-label {
  position: absolute;
  display: block;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 60%;
  font-family: inherit;
  font-size: inherit;
  vertical-align: middle;
  white-space: nowrap;
}

.smart-grid[disabled] .smart-loader:before, .smart-grid[disabled] .smart-loader:after,
.smart-list-box[disabled] .smart-loader:before,
.smart-list-box[disabled] .smart-loader:after,
.smart-list-menu[disabled] .smart-loader:before,
.smart-list-menu[disabled] .smart-loader:after,
.smart-tree[disabled] .smart-loader:before,
.smart-tree[disabled] .smart-loader:after {
  animation: none;
}

@keyframes smart-loader-container-pop-up-down {
  0% {
    top: 0;
  }
  20% {
    top: -2%;
  }
  35% {
    top: -6%;
  }
  60% {
    top: -8%;
  }
  100% {
    top: -10%;
  }
}
@keyframes smart-loader-container-pop-up-top {
  0% {
    top: -10%;
  }
  20% {
    top: -8%;
  }
  35% {
    top: -6%;
  }
  60% {
    top: -2%;
  }
  100% {
    top: 0;
  }
}
@keyframes smart-loader-spin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes smart-loader-spin-fade {
  0% {
    border-top-color: var(--smart-theme-border);
  }
  20% {
    border-top-color: var(--smart-theme-border);
  }
  35% {
    border-top-color: transparent;
  }
  60% {
    border-top-color: var(--smart-theme-border);
  }
  100% {
    border-top-color: var(--smart-theme-border);
  }
}