minimal-loading/html/spectrum.html at master · gaoryrt/minimal-loading · 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
  <style>
    .L {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: #000;
    }
    .r,
    .g,
    .b {
      top: calc(50% - 11px);
      left: calc(50% - 11px);
      position: absolute;
      height: 22px;
      width: 22px;
      border-radius: 100%;
      mix-blend-mode: exclusion;
      transform-origin: 55%;
      animation: A 2s calc(var(--c) * -.66s) infinite;
      filter: blur(1px);
    }
    .r {
      background: #F00;
    }
    .g {
      background: #0F0;
    }
    .b {
      background: #00F;
    }
    @keyframes A {
      to {
        transform: rotate(360deg)
      }
    }
  </style>
</head>
<body>
  <div class="L">
    <div style="--c:1" class="b"></div>
    <div style="--c:2" class="g"></div>
    <div style="--c:3" class="r"></div>
  </div>
</body>
</html>