motion-design-web/exercise-9.html at main · Sadam-jay/motion-design-web · 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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Exercise #9 || SVG text loader</title>

	<!-- Reset -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-normalize@2.0.0/modern-normalize.min.css">

	<!-- Google Fonts -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">

	<style>
		/* Inspired by: https://codepen.io/webstoryboy/pen/rrLdQX */
		:root {
			--loader-text-color: #f6e9fe;
			--loader-dot-color: #A51FF6;
			--loader-bg: #100319;
		}

		html {
			font-size: 16px;
			font-family: 'Poppins', sans-serif;
			line-height: 1.5;
		}

		.loader-container {
			position: fixed;
			inset: 0;
			z-index: 999;
			background-color: var(--loader-bg);
			display: grid;
			place-content: center;
			transition: opacity .4s ease-in-out, visibility .4s ease-in-out;
		}

		/* Air */
	</style>
</head>
<body>
	<div class="loader-container">
		<!-- Air -->
	</div>
</body>
</html>