· 즐거'웅' 코드 (Source)/HTML & CSS & JAVASCRIPT

(즐거웅코드) CSS loading spinner 만들기

즐거 '웅' 인생 2021. 9. 5. 18:19
반응형

[즐거'웅'코드] 목차

  1. 예제 소스
  2. 구현 예시
예제 소스
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
 
<style>
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
 
    .container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
 
    .spinner {
        width: 70px;
        height: 70px;
        border: 7px solid rgba(163, 151, 198, 0.2);
        border-top: 7px solid rgba(163, 151, 198, 1);
        border-radius: 50%;
        animation: spin 2s linear infinite;
    }
</style>
 
<div class="container">
    <div class="spinner"></div>
</div>
구현 예시
반응형
저작자표시