HTML-CSS-JS/GMail Loading animation at master · sahanar11/HTML-CSS-JS · 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
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
<!DOCTYPE html>
<html>
<head>
	<title>gmail anima</title>
	<style>
		body {
			background-color: white;
		}
	#main_div {
		background-color: whitesmoke;
		position: relative;
		top:100px;
		margin: auto;
		width:173px;
		height:128px;
		border-radius: 12px;
		overflow: hidden;
		opacity: 0.3PX;
	}

	#rot1_div{
		background-color: red;
		position: absolute;
		top:-117px;
		margin: auto;
		width:176px;
		height:176px;
		transform: rotate(135deg);
		/* animation: fadein 2s; */

	}

	#rot2_div{
		background-color: whitesmoke;
		position: absolute;
		top:-145px;
		margin: auto;
		width:176px;
		height:176px;
		opacity: 1;
		transform: rotate(135deg);
		/* animation: fadein 2s; */
	}

	#rot3_div{
		background-color: red;
		position: absolute;
		top:0px;
		left:-158px;
		margin: auto;
		width:176px;
		height:128px;
		border-radius: 0px 0px 0px 12px;
	}

	#rot4_div{
		background-color: red;
		position: absolute;
		top:0px;
		left:155px;
		margin: auto;
		width:176px;
		height:128px;
		border-radius: 0px 12px 0px 0px;
	}

@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}
	</style>
</head>
<body>
				 <div id="main_div">
					  <div id="rot1_div">  </div>
					  <div id="rot2_div"></div>
					  <div id="rot3_div"></div>
					  <div id="rot4_div"></div>
				</div>

</body>
</html>