├── index.html
├── LICENSE
└── styles.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 | Loading
13 |
14 |
15 |
16 |
19 |
20 |
21 | Loading
22 |
23 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 WebDevSimplified
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | *, *::after, *::before {
2 | box-sizing: border-box;
3 | }
4 |
5 | .spinner {
6 | width: 300px;
7 | height: 300px;
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | font-size: 2rem;
12 | overflow: hidden;
13 | position: relative;
14 | animation: text-color 2s ease-in-out infinite alternate;
15 | }
16 |
17 | .spinner-sector {
18 | position: absolute;
19 | width: 100%;
20 | height: 100%;
21 | border-radius: 50%;
22 | border: 15px solid transparent;
23 | mix-blend-mode: overlay;
24 | animation: rotate var(--duration) var(--timing) infinite;
25 | pointer-events: none;
26 | }
27 |
28 | .spinner-sector-red {
29 | border-top-color: lightcoral;
30 | --duration: 1.5s;
31 | --timing: ease-in-out;
32 | }
33 |
34 | .spinner-sector-blue {
35 | border-left-color: lightblue;
36 | --duration: 2s;
37 | --timing: ease-in;
38 | }
39 |
40 | .spinner-sector-green {
41 | border-right-color: lightgreen;
42 | --duration: 2.5s;
43 | --timing: ease-out;
44 | }
45 |
46 | @keyframes rotate {
47 | 0% {
48 | transform: rotate(0);
49 | }
50 |
51 | 100% {
52 | transform: rotate(360deg);
53 | }
54 | }
55 |
56 | @keyframes text-color {
57 | 0% {
58 | color: rgba(0, 0, 0, 1);
59 | }
60 |
61 | 50% {
62 | color: rgba(0, 0, 0, .5);
63 | }
64 |
65 | 100% {
66 | color: rgba(0, 0, 0, .1);
67 | }
68 | }
69 |
70 | .spinner-2 {
71 | width: 300px;
72 | height: 300px;
73 | display: flex;
74 | justify-content: center;
75 | align-items: center;
76 | font-size: 2rem;
77 | overflow: hidden;
78 | position: relative;
79 | animation: text-color 2s ease-in-out infinite alternate;
80 | }
81 |
82 | .spinner-2::before,
83 | .spinner-2::after {
84 | content: "";
85 | position: absolute;
86 | width: 100%;
87 | height: 100%;
88 | border-radius: 50%;
89 | border: 15px solid transparent;
90 | mix-blend-mode: overlay;
91 | animation: rotate var(--duration) var(--timing) infinite;
92 | pointer-events: none;
93 | }
94 |
95 | .spinner-2::before {
96 | border-left-color: lightblue;
97 | --duration: 2s;
98 | --timing: ease-in;
99 | }
100 |
101 | .spinner-2::after {
102 | border-right-color: lightgreen;
103 | --duration: 2.5s;
104 | --timing: ease-out;
105 | }
--------------------------------------------------------------------------------