Added Neon Loader (Dezenix#3)

divyaa30 · web-flow · commit 2532505b5caa · 2021-11-03T00:31:26.000+05:30
* Fix: Added Readme

* Fix: Added html

* Fix: Added stylesheet
diff --git a/Neon_Loader/README.md b/Neon_Loader/README.md
@@ -0,0 +1,4 @@
+## Simple Neon Loader
+
+### Preview
+![](https://github.com/divyaa30/frontend-componets/blob/main/Neon-Loader/assets/loader.gif)
diff --git a/Neon_Loader/code/index.html b/Neon_Loader/code/index.html
@@ -0,0 +1,15 @@
+<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>neon-loader</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="loader-wrapper">
+        </div>
+    </div>           
+</body>
+</html>
diff --git a/Neon_Loader/code/style.css b/Neon_Loader/code/style.css
@@ -0,0 +1,50 @@
+{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.container{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: #11052C;  
+
+}
+
+
+.loader-wrapper{
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    background: linear-gradient(to top, #11052C 40% ,#FFE459);
+    border-radius: 50%;
+    animation: rotation 1.5s linear infinite;
+   
+}
+@keyframes rotation {
+    to{
+        transform: rotate(360deg);
+    }
+}
+.loader-wrapper::before{
+    content: '';
+    position: absolute;
+    background: #11052C;
+    inset: 30px 30px 0 0;
+    border-radius: 50%;
+
+}
+
+.loader-wrapper::after{
+    content: '';
+    position: absolute;
+    top: 75px;
+    right: -9px;
+    width: 45px;
+    height: 45px;
+    background: #FFE459;
+    border-radius: 50%;
+    box-shadow: 0 0 8px #FFE459, 0 0 8px #FFE459, 0 0 24px #FFE459, 0 0 48px #FFE459, 0 0 80px #FFE459 ;
+}
