@syncfusion/ej2-popups/styles/spinner/bootstrap5.3.css

A package of Essential JS 2 popup components such as Dialog and Tooltip that is used to display information or messages in separate pop-ups.

/* Font Family */
/* Font Sizes */
/* Radius */
/* 1px */
/* 2px */
/* 3px */
/* 4px */
/* 5px */
/* 6px */
/* 7px */
/* 8px */
/* 9px */
/* 10px */
/* 11px */
/* 12px */
/* 13px */
/* 14px */
/* 15px */
/* 16px */
/* 17px */
/* 18px */
/* 19px */
/* 20px */
/* 21px */
/* 22px */
/* 23px */
/* 24px */
/* 25px */
/* 26px */
/* 27px */
/* 28px */
/* 29px */
/* 30px */
/* 31px */
/* 32px */
/* 33px */
/* 34px */
/* 35px */
/* 36px */
/* 37px */
/* 38px */
/* 39px */
/* 40px */
/* 41px */
/* 42px */
/* 43px */
/* 44px */
/* 45px */
/* 46px */
/* 47px */
/* 48px */
/* 49px */
/* 50px */
/* 5em */
/* 65% */
/* border */
/* 0px */
/* 1px */
/* 1.5px */
/* 2px */
/* 3px */
/* 4px */
/* 5px */
/* 6px */
/* 7px */
/* 8px */
/* 9px */
/* 10px */
/* 11px */
/* 12px */
/* 13px */
/* 14px */
/* 15px */
/* 16px */
/* stylelint-disable property-no-vendor-prefix */
@-webkit-keyframes material-spinner-rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes material-spinner-rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes fabric-spinner-rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes fabric-spinner-rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* stylelint-disable-line no-empty-source */
.e-spinner-pane {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: middle;
  width: 100%;
  z-index: 1000;
}
.e-spinner-pane::after {
  content: "Bootstrap5";
  display: none;
}
.e-spinner-pane.e-spin-left {
  /* stylelint-disable property-no-vendor-prefix */
}
.e-spinner-pane.e-spin-left .e-spinner-inner {
  -webkit-transform: translateX(0%) translateY(-50%);
  left: 0;
  padding-left: 10px;
  transform: translateX(0%) translateY(-50%);
}
.e-spinner-pane.e-spin-right .e-spinner-inner {
  -webkit-transform: translateX(-100%) translateY(-50%);
  left: 100%;
  padding-right: 10px;
  transform: translateX(-100%) translateY(-50%);
}
.e-spinner-pane.e-spin-center .e-spinner-inner {
  -webkit-transform: translateX(-50%) translateY(-50%);
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.e-spinner-pane.e-spin-hide {
  display: none;
}
.e-spinner-pane.e-spin-show {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.e-spinner-pane .e-spinner-inner {
  -webkit-transform: translateX(-50%) translateY(-50%);
  left: 50%;
  margin: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1000;
}
.e-spinner-pane .e-spinner-inner .e-spin-label {
  font-family: var(--e-font-family);
  font-size: 14px;
  margin-top: 10px;
  text-align: center;
}
.e-spinner-pane .e-spinner-inner .e-spin-material,
.e-spinner-pane .e-spinner-inner .e-spin-material3,
.e-spinner-pane .e-spinner-inner .e-spin-tailwind3 {
  -webkit-animation: material-spinner-rotate 1568.63ms linear infinite;
          animation: material-spinner-rotate 1568.63ms linear infinite;
  display: block;
  margin: 0 auto;
}
.e-spinner-pane .e-spinner-inner .e-spin-material .e-path-circle,
.e-spinner-pane .e-spinner-inner .e-spin-material3 .e-path-circle,
.e-spinner-pane .e-spinner-inner .e-spin-tailwind3 .e-path-circle {
  fill: none;
  stroke-linecap: square;
}
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 {
  -webkit-animation: material-spinner-rotate 0.75s linear infinite;
          animation: material-spinner-rotate 0.75s linear infinite;
  border-radius: 999px;
  display: block;
  margin: 0 auto;
}
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle {
  fill: none;
  stroke-linecap: square;
  stroke-width: 4;
}
.e-spinner-pane .e-spinner-inner .e-spin-fluent,
.e-spinner-pane .e-spinner-inner .e-spin-fluent2,
.e-spinner-pane .e-spinner-inner .e-spin-fabric {
  -webkit-animation: fabric-spinner-rotate 1.3s infinite cubic-bezier(0.53, 0.21, 0.29, 0.67);
          animation: fabric-spinner-rotate 1.3s infinite cubic-bezier(0.53, 0.21, 0.29, 0.67);
  display: block;
  margin: 0 auto;
  overflow: visible;
}
.e-spinner-pane .e-spinner-inner .e-spin-fluent .e-path-arc,
.e-spinner-pane .e-spinner-inner .e-spin-fluent .e-path-circle,
.e-spinner-pane .e-spinner-inner .e-spin-fluent2 .e-path-arc,
.e-spinner-pane .e-spinner-inner .e-spin-fluent2 .e-path-circle,
.e-spinner-pane .e-spinner-inner .e-spin-fabric .e-path-arc,
.e-spinner-pane .e-spinner-inner .e-spin-fabric .e-path-circle {
  fill: none;
  stroke-width: 1.5;
}
.e-spinner-pane .e-spinner-inner .e-spin-tailwind {
  -webkit-animation: fabric-spinner-rotate 1.3s infinite cubic-bezier(0.21, 0.21, 0.21, 0.21);
          animation: fabric-spinner-rotate 1.3s infinite cubic-bezier(0.21, 0.21, 0.21, 0.21);
  display: block;
  margin: 0 auto;
  overflow: visible;
}
.e-spinner-pane .e-spinner-inner .e-spin-tailwind .e-path-arc,
.e-spinner-pane .e-spinner-inner .e-spin-tailwind .e-path-circle {
  fill: none;
  stroke-width: 4.5;
}
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap5,
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap5v3 {
  -webkit-animation: material-spinner-rotate 0.75s linear infinite;
          animation: material-spinner-rotate 0.75s linear infinite;
  border-radius: 999px;
  display: block;
  margin: 0 auto;
}
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap5 .e-path-circle,
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap5v3 .e-path-circle {
  fill: none;
  stroke-linecap: square;
  stroke-width: 4;
}
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap {
  display: block;
  margin: 0 auto;
}
.e-spinner-pane .e-spinner-inner .e-spin-high-contrast {
  -webkit-animation: fabric-spinner-rotate 1.3s infinite cubic-bezier(0.53, 0.21, 0.29, 0.67);
          animation: fabric-spinner-rotate 1.3s infinite cubic-bezier(0.53, 0.21, 0.29, 0.67);
  display: block;
  margin: 0 auto;
  overflow: visible;
}
.e-spinner-pane .e-spinner-inner .e-spin-high-contrast .e-path-arc,
.e-spinner-pane .e-spinner-inner .e-spin-high-contrast .e-path-circle {
  fill: none;
  stroke-width: 1.5;
}

.e-spinner-pane {
  background-color: transparent;
}
.e-spinner-pane.e-spin-overlay {
  background-color: rgba(var(--color-sf-overlay-bg-color), 0.5);
}
.e-spinner-pane.e-spin-overlay .e-spinner-inner .e-spin-label {
  color: var(--color-sf-white);
}
.e-spinner-pane.e-spin-overlay .e-spinner-inner .e-spin-bootstrap {
  fill: var(--color-sf-white);
  stroke: var(--color-sf-white);
}
.e-spinner-pane .e-spinner-inner .e-spin-label {
  color: var(--color-sf-primary);
}
.e-spinner-pane .e-spinner-inner .e-spin-fluent .e-path-circle,
.e-spinner-pane .e-spinner-inner .e-spin-fluent2 .e-path-circle,
.e-spinner-pane .e-spinner-inner .e-spin-fabric .e-path-circle {
  stroke: var(--color-sf-primary-light);
}
.e-spinner-pane .e-spinner-inner .e-spin-fluent .e-path-arc,
.e-spinner-pane .e-spinner-inner .e-spin-fluent2 .e-path-arc,
.e-spinner-pane .e-spinner-inner .e-spin-fabric .e-path-arc {
  stroke: var(--color-sf-primary);
}
.e-spinner-pane .e-spinner-inner .e-spin-tailwind .e-path-circle {
  stroke: var(--color-sf-primary-light);
}
.e-spinner-pane .e-spinner-inner .e-spin-tailwind .e-path-arc {
  stroke: var(--color-sf-primary);
}
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap5,
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap5v3 {
  stroke: var(--color-sf-primary);
}
.e-spinner-pane .e-spinner-inner .e-spin-high-contrast .e-path-circle {
  stroke: var(--color-sf-primary-light);
}
.e-spinner-pane .e-spinner-inner .e-spin-high-contrast .e-path-arc {
  stroke: var(--color-sf-primary);
}
.e-spinner-pane .e-spinner-inner .e-spin-material,
.e-spinner-pane .e-spinner-inner .e-spin-material3,
.e-spinner-pane .e-spinner-inner .e-spin-tailwind3 {
  stroke: var(--color-sf-primary);
}
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 {
  stroke: var(--color-sf-primary);
}
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap {
  fill: var(--color-sf-primary);
  stroke: var(--color-sf-primary);
}