DarkCodeClone/loadingAni.css at master · geonwoomun/DarkCodeClone · 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
body {
    margin: 0;
    padding : 0;
    background : #f1f1f1;
}

.loading {
    position: absolute;
    top : 50%;
    left: 50%;
    transform : translate(-50%, -50%) rotate(75deg);
    width : 15px;
    height: 15px;
}

.loading::before, .loading::after{
    content : "";
    position: absolute;
    top : 50%;
    left: 50%;
    transform : translate(-50%, -50%);
    width : 15px;
    height: 15px;
    border-radius: 15px;
    animation : loading 1.5s infinite linear;
}

.loading::before {
    box-shadow: 15px 15px #e77f67, -15px -15px #778beb;
}

.loading::after {
    box-shadow: 15px 15px #f8a5c2, -15px -15px #f5cd79;
    transform : translate(-50%, -50%) rotate(90deg);
}

@keyframes loading {
    50% {
        height :45px;
    }
}