├── README.md
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # HTML-CSS-Simple-Spinner
2 |
3 |
4 | https://user-images.githubusercontent.com/42389395/187465042-72a9a025-23cf-4180-ac34-e97e0baafc2f.mov
5 |
6 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Test
7 |
8 |
9 |
10 |
11 |
12 | Simple CSS Spinner
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 |
2 |
3 | body {
4 | margin-top: 100px;
5 | background-color: #f2eee3;
6 | color: #000;
7 | text-align:center;
8 | }
9 |
10 | h1 {
11 | font: 2em 'Roboto', sans-serif;
12 | margin-bottom: 40px;
13 | }
14 |
15 | #loading {
16 | display: inline-block;
17 | width: 50px;
18 | height: 50px;
19 | border: 3px solid #eae6f2;
20 | border-radius: 50%;
21 | border-top-color: #a49b34;
22 | animation: spin 1s ease-in-out infinite;
23 | -webkit-animation: spin 1s ease-in-out infinite;
24 | }
25 |
26 | @keyframes spin {
27 | to { -webkit-transform: rotate(360deg); }
28 | }
29 | @-webkit-keyframes spin {
30 | to { -webkit-transform: rotate(360deg); }
31 | }
32 |
--------------------------------------------------------------------------------