yw-ui-vue2/lib/components/yw-loading/style.css

YW-UI-Vue2

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/@vue/cli-service/lib/config/vue-loader-v15-resolve-compat/vue-loader.js??vue-loader-options!./packages/components/loading/src/index.vue?vue&type=style&index=0&id=3cca77df&lang=less&scoped=true ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.loading-container[data-v-3cca77df] {
  position: relative;
  min-height: var(--3cca77df-setContainerHeight);
}
.loading-container.loading[data-v-3cca77df] {
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
.loading-container .loader-blur[data-v-3cca77df] {
  width: 100%;
  min-height: var(--3cca77df-setContainerHeight);
  height: 100%;
  background: #fff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  clear: both;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  z-index: 9999;
}
.loader[data-v-3cca77df] {
  width: var(--3cca77df-getSize);
  height: var(--3cca77df-getSize);
  position: absolute;
  z-index: 9999;
  top: var(--3cca77df-getTop);
  left: 50%;
  filter: opacity(100%);
  transform: translate(-50%, var(--3cca77df-getCenter));
}
.loader[data-v-3cca77df]:before {
  content: "";
  width: var(--3cca77df-getSize);
  height: 5px;
  background: #000;
  opacity: 0.25;
  position: absolute;
  top: calc(var(--3cca77df-getSize) + 15px);
  left: 0;
  border-radius: 50%;
  animation: shadow-3cca77df 0.5s linear infinite;
  z-index: 9999;
}
.loader[data-v-3cca77df]:after {
  content: "";
  width: 100%;
  height: 100%;
  background: #5286ec;
  animation: bxSpin-3cca77df 0.5s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px;
  z-index: 9999;
}
@keyframes bxSpin-3cca77df {
17% {
    border-bottom-right-radius: 3px;
}
25% {
    transform: translateY(9px) rotate(22.5deg);
}
50% {
    transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 40px;
}
75% {
    transform: translateY(9px) rotate(67.5deg);
}
100% {
    transform: translateY(0) rotate(90deg);
}
}
@keyframes shadow-3cca77df {
0%,
  100% {
    transform: scale(1, 1);
}
50% {
    transform: scale(1.2, 1);
}
}
.baseShadow[data-v-3cca77df] {
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
}
.centerShadow[data-v-3cca77df] {
  box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.1);
}
.topShadow[data-v-3cca77df] {
  box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.1);
}
.rightShadow[data-v-3cca77df] {
  box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.leftShadow[data-v-3cca77df] {
  box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.minor-btn[data-v-3cca77df] {
  background: var(--Gray-Gray4-, #dcdcdc);
  border-color: var(--Gray-Gray4-, #dcdcdc);
}
.minor-btn[data-v-3cca77df]:hover {
  background: var(--Gray-Gray5-, #c5c5c5);
  border-color: var(--Gray-Gray4-, #c5c5c5);
}
.minor-btn[data-v-3cca77df]:active {
  background: var(--Gray-Gray6-, #999);
  border-color: var(--Gray-Gray4-, #999);
}