프로그램 연습
2025-06-23 Mon

로그인

검색

css

CSS Loading 만들기

Extra Form

Such Spinners, Much Loading

 
 
 
 
 
 
 
 
 
 
?
HTML 부분
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
<div class="main-site">
    <div class="main-header pad-top wrapper" id="mainHeader">
        <h1 class="text-giga">Such Spinners, Much Loading</h1>
    </div>
 
    <div class="main-content space-top wrapper" role="main" id="mainContent">
        <div class="loader loader-black loader-1"></div>
 
        <div class="loader loader-2"></div>
 
        <div class="loader loader-black loader-3"></div>
 
        <div class="loader loader-black loader-4"></div>
 
        <div class="loader loader-black loader-5"></div>
 
        <div class="loader loader-6"></div>
 
        <div class="loader loader-7"></div>
 
        <div class="loader loader-8"></div>
         
        <div class="loader loader-9"></div>
 
        <div class="loader loader-10"></div>
    </div>
</div>

 

?
CSS 부분
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
.loader {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 3em;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
.loader,
.loader:before,
.loader:after {
    animation: 1s infinite ease-in-out;
}
.loader:before,
.loader:after {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}
 
.loader-black { background-color: #333; }
 
.loader-1 { animation-name: loader1; }
@keyframes loader1 {
    from { transform: scale(0); opacity: 1; }
    to   { transform: scale(1); opacity: 0; }
}
 
 
/* Loader 2 */
 
.loader-2:before,
.loader-2:after {
    content: '';
}
.loader-2:before {
    border: 1px solid #333;
    top: -1px;
    left: -1px;
    opacity: 0;
    animation-name: loader2-1;
}
 
    @keyframes loader2-1 {
        0% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.3); opacity: 0; }
        100% { transform: scale(1.3); opacity: 0; }
    }
 
.loader-2:after {
    background-color: #333;
    animation-name: loader2-2;
}
 
    @keyframes loader2-2 {
        0% { transform: scale(1); }
        50% { transform: scale(0.7); }
        100% { transform: scale(1); }
    }
 
 
/* Loader 3 */
 
.loader-3:before {
    content: '';
    border: 10px solid white;
    top: -10px;
    left: -10px;
    animation-name: loader3;
}
 
    @keyframes loader3 {
        0% { transform: scale(0); }
        100% { transform: scale(1); }
    }
 
 
/* Loader 4 */
 
.loader-4:before {
    content: '';
    width: 25px;
    height: 25px;
    margin: 0 0 0 -12px;
    background-color: white;
    top: auto;
    bottom: 0;
    left: 50%;
    transform-origin: 50% 0%;
    animation: loader4 1s infinite linear;
}
 
    @keyframes loader4 {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
 
 
/* Loader 5 */
 
.loader-5 {
    animation: loader5 1s infinite linear;
}
 
    @keyframes loader5 {
        0% {   transform: rotate(0deg); border-radius: 50%; }
        50% {  transform: rotate(90deg); border-radius: 0%; }
        100% { transform: rotate(180deg); border-radius: 50%; }
    }
 
 
/* Loader 6 */
 
.loader-6 {
    animation: loader6-1 1.5s infinite linear;
}
.loader-6:before,
.loader-6:after {
    content:'';
    margin: -25px 0 0 -25px;
    top: 50%;
    left: 50%;
    background-color: rgba(30,30,30,0.7);
    animation-name: loader6-2;
}
.loader-6:after { animation-direction: reverse; }
 
    @keyframes loader6-1 {
        0% {   transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
 
    @keyframes loader6-2 {
        0%   { transform: scale(0.2); left:   0%; }
        50%  { transform: scale(1.0); left:  50%; }
        100% { transform: scale(0.2); left: 100%; }
    }
 
 
/* Loader 7 */
 
.loader-7 {
    animation: loader7-1 1s infinite linear;
}
 
.loader-7:before,
.loader-7:after {
    content: '';
    width: 80%;
    height: 80%;
    background-color: #333;
    top: 5%;
}
.loader-7:before {
    left: -5%;
    animation: loader7-2 1s infinite alternate ease-in-out;
    transform-origin: 10% 50%;
}
.loader-7:after {
    left: auto;
    right: -5%;
    animation: loader7-2 1s 1s infinite alternate ease-in-out;
    transform: scale(0);
    transform-origin: 90% 50%;
}
 
    @keyframes loader7-1 {
        0%   { transform: rotate(20deg); }
        100% { transform: rotate(380deg); }
    }
 
    @keyframes loader7-2 {
        0%   { transform: scale(0); }
        100% { transform: scale(1); }
    }
 
 
/* Loader 8 */
 
.loader-8:before,
.loader-8:after {
    content: '';
    background-color: #333;
    transform: scale(0);
    animation: loader8 1.5s infinite ease-in-out;
}
.loader-8:after { animation-delay: 0.75s; }
 
    @keyframes loader8 {
        0%   { transform: translateX(-100%) scale(0); }
        50%  { transform: translateX(0%)    scale(1); }
        100% { transform: translateX(100%)  scale(0); }
    }
 
 
/* Loader 9 & 10 */
 
.loader-9,
.loader-10 {
    background-color: white;
    animation: loader9 0.4s infinite linear;
}
.loader-10 {
    animation: loader10 60s infinite ease-in-out;
}
    .loader-9:before,
    .loader-10:before {
        content: '';
        width: 80%;
        height: 80%;
        background-color: white;
        top: 10%;
        left: 10%;
        box-shadow: 5px -3px 0 rgba(255,100,100,0.7),
                    5px 5px 0 rgba(100,255,100,0.7),
                    -3px 5px 0 rgba(100,100,255,0.7),
                    -5px -5px 0 rgba(240,240,120,0.7);
    }
    .loader-9:after,
    .loader-10:after {
        content: '';
        border: 3px solid white;
        z-index: 2;
        top: -3px;
        left: -3px;
    }
 
    @keyframes loader9 {
        0%   { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
 
    @keyframes loader10 {
        0%   { transform: rotate(0deg); }
        100% { transform: rotate(360000deg); }
    }

 

 

목록
위로 아래로 게시글 수정 내역 댓글로 가기
Category
  1. 12
    Oct 2022
    11:10

    운영체제 색상 모드에 따른 CSS 색상 제어 방법

    운영체제의 Light 모드 또는 Dark 모드에 따라 자동으로 색상이 결정되도록 CSS에서 색상값을 정하는 방법입니다. 색상별로 관리가 가능하도록 Light 모드와 Dark 모드를 그룹(모음)으로 관리할 수 있도록 합니다. /* 모드별 그룹 */ @mixin 밝은모음이름 { --...
    Read More
  2. 18
    Mar 2022
    14:52

    눈내리는 CSS 샘플예제

    눈이 내리는 CSS 샘플 예제 눈 내리는 화면
    Read More
  3. 16
    Dec 2021
    12:55

    Can i use .. ? [ CSS 호환성 확인 사이트 ]

    Can i use _________ ? 사용하는 CSS 을 브라우저 호환성을 확인할 수 있습니다.
    Read More
  4. 11
    Dec 2021
    23:54

    CSS Loading 만들기

    Such Spinners, Much Loading <div class="main-site"> <div class="main-header pad-top wrapper" id="mainHeader"> <h1 class="text-giga">Such Spinners, Much Loading</h1> </div> <div class="main-content space-top wrapper" role="main" id="mainConte...
    Read More
  5. 11
    Dec 2021
    22:56

    CSS 를 이용한 막대그래프

    6 귤 3 사과 5 바나나 7 키위 10 딸기 6 오이 <div class="line_graph"> <div class="line1 line" style="width:12%"> <div class="line_body"> <div class="line_inner" style="height:70%;background: #91ce00;"> <div class="line_count" style="text-align...
    Read More
  6. 11
    Dec 2021
    22:47

    Loading CSS

    Read More
  7. 28
    Nov 2021
    19:36

    CSS FlexBox

    Read More
  8. 27
    Nov 2021
    23:22

    CSS Layout 관련

    css에서 웹문서의 레이아웃을 지정하고 수정하기 위한 중요한 속성인 position, display, float 속성에 대해 확인해 봅니다. https://velog.io/@jeongmin_sung/TIL-CSS-position-display-float-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0 https://www.w3schools.co...
    Read More
  9. 25
    Sep 2021
    23:05

    이미지를 가운데 정렬하기

    이미지 가운데 정렬하기 <img src = "excel.gif" style="vertical-align:middle" >
    Read More
  10. 14
    Sep 2021
    00:19

    배경 이미지 고정 하기

    background-attachment : scroll | fixed | local ; 배경이미지의 스크롤 방식을 조절한다. scroll > 본문과 이미지가 같이 스크롤 됨. fixed > 본문이 스크롤 되어도 이미지는 고정됨. local >
    Read More
Board Pagination Prev 1 Next
/ 1
서버에 요청 중입니다. 잠시만 기다려 주십시오...

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5