dalodanielmesa
diff --git a/‎02.Creative Loading Animation/index.html‎
Lines changed: 19 additions & 0 deletions b/‎02.Creative Loading Animation/index.html‎
Lines changed: 19 additions & 0 deletions
diff --git a/‎02.Creative Loading Animation/style.css‎
Lines changed: 52 additions & 0 deletions b/‎02.Creative Loading Animation/style.css‎
Lines changed: 52 additions & 0 deletions
@@ -0,0 +1,19 @@
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Loading Animation</title>
+ <link rel="stylesheet" href="style.css" />
+ </head>
+ <body>
+ <section class="wrapper">
+ <div class="loader">
+ <div class="loading one"></div>
+ <div class="loading two"></div>
+ <div class="loading three"></div>
+ <div class="loading four"></div>
+ </div>
+ </section>
+ </body>
+</html>
@@ -0,0 +1,52 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ background: #00008bcb;
+}
+
+.wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+}
+
+.wrapper .loader {
+ display: flex;
+ justify-content: space-evenly;
+ padding: 0 20px;
+}
+
+.loader .loading {
+ background: #fff;
+ width: 30px;
+ height: 30px;
+ border-radius: 50px;
+ margin: 0 10px;
+ animation: load 0.8s ease infinite;
+}
+
+.loader .loading.one {
+ animation-delay: 0.3s;
+}
+.loader .loading.two {
+ animation-delay: 0.4s;
+}
+.loader .loading.three {
+ animation-delay: 0.5s;
+}
+
+@keyframes load {
+ 0% {
+ width: 30px;
+ height: 30px;
+ }
+ 50% {
+ width: 20px;
+ height: 20px;
+ }
+}