Skip to content

Commit a8c6c22

Browse files
solygambassolygambas
committed
add css loaders
1 parent a5aaae5 commit a8c6c22

File tree

4 files changed

+180
-0
lines changed

4 files changed

+180
-0
lines changed

‎23-kinetic loader/script.js

Whitespace-only changes.

‎54-css loaders/index.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!-- Based on CSS Loaders Tutorial by Shaun Pelling - The Net Ninja (2020)
2+
see: https://www.youtube.com/watch?v=GFkorypkXsQ&list=PL4cUxeGkcC9guBMasBotBhq_cmvXhyr6t -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<link rel="stylesheet" href="style.css" />
10+
<title>CSS Loaders</title>
11+
</head>
12+
<body>
13+
<!-- spinner -->
14+
<div class="spinner">
15+
<div></div>
16+
<div></div>
17+
</div>
18+
19+
<!-- bouncing balls -->
20+
<div class="bouncer">
21+
<div></div>
22+
<div></div>
23+
<div></div>
24+
<div></div>
25+
</div>
26+
27+
<!-- flipping squares -->
28+
<div class="square">
29+
<div></div>
30+
<div></div>
31+
</div>
32+
</body>
33+
</html>

‎54-css loaders/style.css

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
body {
2+
max-width: 960px;
3+
display: flex;
4+
justify-content: space-around;
5+
margin: 200px auto;
6+
}
7+
8+
/* spinner */
9+
10+
.spinner {
11+
width: 100px;
12+
height: 100px;
13+
position: relative;
14+
}
15+
16+
.spinner div {
17+
box-sizing: border-box;
18+
position: absolute;
19+
width: 100%;
20+
height: 100%;
21+
border: 10px solid transparent;
22+
border-top-color: #ad60f5;
23+
border-radius: 50%;
24+
animation: spinnerOne 1.2s linear infinite;
25+
}
26+
27+
.spinner div:nth-child(2) {
28+
border: 10px solid transparent;
29+
border-bottom-color: #ad60f5;
30+
animation: spinnerTwo 1.2s linear infinite;
31+
}
32+
33+
@keyframes spinnerOne {
34+
0% {
35+
transform: rotate(0deg);
36+
border-width: 10px;
37+
}
38+
50% {
39+
transform: rotate(180deg);
40+
border-width: 1px;
41+
}
42+
100% {
43+
transform: rotate(360deg);
44+
border-width: 10px;
45+
}
46+
}
47+
48+
@keyframes spinnerTwo {
49+
0% {
50+
transform: rotate(0deg);
51+
border-width: 1px;
52+
}
53+
50% {
54+
transform: rotate(180deg);
55+
border-width: 10px;
56+
}
57+
100% {
58+
transform: rotate(360deg);
59+
border-width: 1px;
60+
}
61+
}
62+
63+
/* bouncing balls */
64+
65+
.bouncer {
66+
display: flex;
67+
justify-content: space-around;
68+
align-items: flex-end;
69+
width: 100px;
70+
height: 100px;
71+
}
72+
73+
.bouncer div {
74+
width: 20px;
75+
height: 20px;
76+
background-color: #0077ff;
77+
border-radius: 50%;
78+
animation: bouncer 0.5s cubic-bezier(0.19, 0.57, 0.3, 0.98) infinite alternate;
79+
/* use https://cubic-bezier.com/ to customize the curve */
80+
}
81+
82+
.bouncer div:nth-child(2) {
83+
animation-delay: 0.1s;
84+
opacity: 0.8;
85+
}
86+
87+
.bouncer div:nth-child(3) {
88+
animation-delay: 0.2s;
89+
opacity: 0.6;
90+
}
91+
92+
.bouncer div:nth-child(4) {
93+
animation-delay: 0.3s;
94+
opacity: 0.4;
95+
}
96+
97+
@keyframes bouncer {
98+
from {
99+
transform: translateY(0);
100+
}
101+
to {
102+
transform: translateY(-100px);
103+
}
104+
}
105+
106+
/* flipping squares */
107+
108+
.square {
109+
width: 100px;
110+
height: 100px;
111+
position: relative;
112+
perspective: 200px;
113+
}
114+
115+
.square div {
116+
position: absolute;
117+
top: 0;
118+
height: 50px;
119+
width: 50px;
120+
background: coral;
121+
animation: flip 2s linear infinite;
122+
transform-origin: right bottom;
123+
}
124+
125+
.square div:nth-child(2) {
126+
animation-delay: 1s;
127+
opacity: 0.5;
128+
}
129+
130+
@keyframes flip {
131+
0% {
132+
transform: rotateX(0) rotateY(0);
133+
}
134+
25% {
135+
transform: rotateX(0) rotateY(180deg);
136+
}
137+
50% {
138+
transform: rotateX(180deg) rotateY(180deg);
139+
}
140+
75% {
141+
transform: rotateX(180deg) rotateY(0);
142+
}
143+
100% {
144+
transform: rotateX(0) rotateY(0);
145+
}
146+
}

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -59,5 +59,6 @@
5959
| 51 | [Video Background](https://github.com/solygambas/html-css-fifty-projects/tree/master/51-video%20background) | [Live Demo](https://codepen.io/solygambas/full/oNYNLwL) |
6060
| 52 | [Portfolio with CSS Grid](https://github.com/solygambas/html-css-fifty-projects/tree/master/52-portfolio%20grid) | [Live Demo](https://codepen.io/solygambas/full/MWbKzzO) |
6161
| 53 | [Touch Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/53-touch%20slider) | [Live Demo](https://codepen.io/solygambas/full/QWGEyLK) |
62+
| 54 | [CSS Loaders](https://github.com/solygambas/html-css-fifty-projects/tree/master/54-css%20loaders) | [Live Demo](https://codepen.io/solygambas/full/QWGdgaZ) |
6263

6364
Based on [50 Projects In 50 Days - HTML, CSS & JavaScript](https://www.udemy.com/course/50-projects-50-days/) by Brad Traversy (2020).

0 commit comments

Comments
 (0)