35-mini-projects/loading animation/style.css at main · Manoj-kumar-C/35-mini-projects · 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
body{
	background: linear-gradient(black, rgb(59, 59, 59));
    color: aliceblue;
    font-family: Tahoma, sans-serif;
    font-style: oblique;
}
.circle{
	margin: 70px auto;
	width: 40px;
	height: 40px;
	border: 5px solid rgba(255,255,255,0.2);
	border-radius: 50%;
	border-top-color: rgb(255, 0, 0);
	animation: spin 2s linear infinite;
}
@Keyframes spin{

	100%{
		transform: rotate(360deg);
	}
}
.container{
	width: 40px;
	margin: 70px auto;
}
.dot{
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 50%;

}
.dot1{
	background-color: #1a96bc;
	animation: jump-up 0.6s 0.1s linear infinite;
}
.dot2{
	background-color: #ff6e4a;
	animation: jump-up 0.6s 0.2s linear infinite;
}
.dot3{
	background-color: #75e067;
	animation: jump-up 0.6s 0.3s linear infinite;
}

@Keyframes jump-up{
	50%{
		transform: translate(0,15px);
	}
}

.box{
	width: 15px;
	height: 15px;
	background-color: #008cbc;
	display: inline-block;
	animation: pulse 0.6s ease-in infinite alternate;
}
.box2, .box3{
	animation-delay: 0.6s;
}
.box1{
    background-color: #e06767;
}
.box2{
    background-color: #75e067;
}
.box3{
    background-color: #67cee0;
}
.box4{
    background-color: #e0b667;
}

@Keyframes pulse{
	100%{
		opacity: 0;
	}
}