css-spinner/new_spinner.html at d213ef239d756ca305121f60615748a4b6990966 · loadingio/css-spinner · 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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
    <head>
        <title>Loading animation</title>
<style>
body
{
    background-color:white;
    font-family: Helvetica, Arial, sans-serif;
}
#a {
    width:200px;
    height:200px;
    position:absolute;
    margin:130px;
    border-radius:0px;
    background-color:#fff;
    animation-name:a;
    animation-duration:1000ms;
    animation-iteration-count:infinite ;
    border:2px solid #0dcecb;
}
#b {
    width:100px;
    height:100px;
    position:absolute;
    margin:180px;
    border-radius:0px;
    background-color:#0dcecb;
    animation-name:b;
    animation-duration:1000ms;
    animation-iteration-count:infinite ;
}
@keyframes a{
    0%{border-radius:0px;
    transform:rotate(0deg);}
    50%{border-radius:100px;
    transform:rotate(180deg);}
    100%{border-radius:0px;
    transform:rotate(360deg);}
}
@keyframes b{
    0%{border-radius:0px;
    transform:rotate(0deg);}
    50%{border-radius:100px;
    transform:rotate(-180deg);}
    100%{border-radius:0px;
    transform:rotate(-360deg);}
}
         </style>
    </head>
    <body>
            <p id="a"></p>
            <p id="b"></p>
    </body>
</html>