loader animation

HTML

<div class="logo" aria-hidden="true"></div>

CSS

.logo,
.logo::after,
.logo::before {
  position: absolute;
  top: 0;
  left: 0;
}

.logo {
  width: 72px;
  height: 72px;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px var(--theme-text-color);
  background: var(--theme-base-color);
  text-align: center;
  animation: rotate1 1s linear infinite;
  transform: translate(-50%, -50%) perspective(77px) rotateX(180deg);
  top: 50%;
  left: 50%;
}

.logo::after,
.logo::before {
  content: "Loading...";
  font-size: 12px;
  text-align: center;
  display: block;
  width: 100%;
  height: 100%;
}

.logo::after {
  background: url("data:image/png;base64,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") center no-repeat;
}
Back to top