Add files via upload

CodeHimBlog · Oct 3, 2023 · 7e6aec2 · 7e6aec2
1 parent 89d6f94
commit 7e6aec2
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 0 deletions.
diff --git a/code-snippet/css-loader-animation/index.html b/code-snippet/css-loader-animation/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Super Simple CSS Spinner</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<h1>Super simple CSS spinner</h1>
+<div id="loading"></div>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/code-snippet/css-loader-animation/script.js b/code-snippet/css-loader-animation/script.js
@@ -0,0 +1,2 @@
+// recreating https://codepen.io/scottkellum/pen/tzjCK
+// just to learn how he did it
diff --git a/code-snippet/css-loader-animation/style.css b/code-snippet/css-loader-animation/style.css
@@ -0,0 +1,26 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto:100);
+
+body { margin-top: 100px; background-color: #137b85; color: #fff; text-align:center; }
+
+h1 {
+  font: 2em 'Roboto', sans-serif;
+  margin-bottom: 40px;
+}
+
+#loading {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  border: 3px solid rgba(255,255,255,.3);
+  border-radius: 50%;
+  border-top-color: #fff;
+  animation: spin 1s ease-in-out infinite;
+  -webkit-animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to { -webkit-transform: rotate(360deg); }
+}
+@-webkit-keyframes spin {
+  to { -webkit-transform: rotate(360deg); }
+}