kalkulator-web/loader.css at main · mininxd/kalkulator-web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/* HTML: <div class="loader"></div> */
.loader {
  --s: 25px;

  --_d: calc(0.353*var(--s));
  width: calc(var(--s) + var(--_d));
  aspect-ratio: 1;
  display: grid;
}
.loader:before,
.loader:after {
  content:"";
  clip-path:polygon(var(--_d) 0,100% 0,100% calc(100% - var(--_d)),calc(100% - var(--_d)) 100%,0 100%,0 var(--_d));
  background:
    conic-gradient(from -90deg at var(--s) var(--_d),
     #fff 135deg,#888 0 270deg,#D2E2FC 0);
  animation: l4 1.2s infinite;
}
.loader:before {
  z-index: 1;
  margin-bottom: calc(var(--_d)/-2 - 1px);
}
.loader:after {
  margin-top: calc(var(--_d)/-2 - 1px);
  animation-delay: 0.6s
}
@keyframes l4{
  0%     {transform: translate(0)}
  16.67% {transform: translate(-10px)}
  33.33% {transform: translate(10px)}
  50%,
  100%   {transform: translate(0)}
}