@syncfusion/ej2-popups/styles/spinner/fluent.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.

/* 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: "Fluent";
  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: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
  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: 50%;
  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: 50%;
  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(0, 0, 0, 0.4);
}
.e-spinner-pane.e-spin-overlay .e-spinner-inner .e-spin-label {
  color: #fff;
}
.e-spinner-pane.e-spin-overlay .e-spinner-inner .e-spin-bootstrap {
  fill: #fff;
  stroke: #fff;
}
.e-spinner-pane .e-spinner-inner .e-spin-label {
  color: #0078d4;
}
.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: #c7e0f4;
}
.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: #0078d4;
}
.e-spinner-pane .e-spinner-inner .e-spin-tailwind .e-path-circle {
  stroke: #c7e0f4;
}
.e-spinner-pane .e-spinner-inner .e-spin-tailwind .e-path-arc {
  stroke: #0078d4;
}
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap5,
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap5v3 {
  stroke: #0078d4;
}
.e-spinner-pane .e-spinner-inner .e-spin-high-contrast .e-path-circle {
  stroke: #c7e0f4;
}
.e-spinner-pane .e-spinner-inner .e-spin-high-contrast .e-path-arc {
  stroke: #0078d4;
}
.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: #0078d4;
}
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 {
  stroke: #0078d4;
}
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap {
  fill: #0078d4;
  stroke: #0078d4;
}