Melting Ice Cream

manrajgrover · Jul 4, 2018 · 37f5d32 · 37f5d32
1 parent 1ff1aac
commit 37f5d32
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 1 deletion.
diff --git a/Assets/Melting Ice Cream.gif b/Assets/Melting Ice Cream.gif
diff --git a/Loaders/Melting Ice Cream.html b/Loaders/Melting Ice Cream.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Melting Ice Cream | Loader</title>
+    <style>
+        html, body {
+            height: 100%;
+            background: skyblue;
+            margin: 0;
+            padding: 0;
+        }
+        #melting-icecream {
+            width: 0px;
+            height: 0px;
+            position: relative;
+            top: 40%;
+            left: 40%;
+            border-top: 15px solid transparent;
+            border-bottom: 15px solid transparent;
+            border-right: 50px solid orange;
+        }
+
+         #melting-icecream::before {
+            content: '';
+            display: block;
+            position: absolute;
+            left: 46px;
+            top: -10px;
+            width: 31px;
+            height: 20px;
+            border-top-left-radius: 20px;
+            border-top-right-radius: 20px;
+            transform: rotate(90deg);
+            background: #ffffff;
+        }
+        #melting-icecream::after {
+            content: '';
+            display: block;
+            position: absolute;
+            background: #ffffff;
+            left: 69px;
+            top: 5px;
+            width: 8px;
+            height: 8px;
+            border-radius: 100%;
+            border-top-left-radius: 6px;
+            border-top-right-radius: 2px;
+            transform: rotate(-45deg);
+            animation: melt 0.8s infinite linear;
+        }
+
+        @keyframes melt {
+            0% {
+                opacity: 0;
+                transform: translateY(0) rotate(-45deg);
+            }
+
+            100% {
+                opacity: 1;
+                transform: translateY(60px) rotate(-45deg);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="melting-icecream"></div>
+</body>
+</html>
diff --git a/README.md b/README.md
@@ -48,7 +48,9 @@ Please go through the [Contributions](https://github.com/ManrajGrover/SingleDivP
 | [Ripple Effect](https://github.com/ManrajGrover/SingleDivProject/blob/master/Loaders/Ripple%20Effect.html) |  [ManrajGrover](https://github.com/ManrajGrover) | <img width="350" src="https://github.com/ManrajGrover/SingleDivProject/blob/master/Assets/Ripple%20Effect.gif" /> |
 | [Play Loader](https://github.com/ManrajGrover/SingleDivProject/blob/master/Loaders/Play%20Loader.html) | [ManrajGrover](https://github.com/ManrajGrover) | <img width="350" src="https://raw.githubusercontent.com/ManrajGrover/SingleDivProject/master/Assets/Play%20Loader.gif" /> |
 | [Simple Spinner](https://github.com/ManrajGrover/SingleDivProject/blob/master/Loaders/Simple%20Spinner.html) |  [ManrajGrover](https://github.com/ManrajGrover) | <img width="350" src="https://github.com/ManrajGrover/SingleDivProject/blob/master/Assets/Simple%20Spinner.gif" /> |
-| [Simple Text Loader](https://github.com/ManrajGrover/SingleDivProject/blob/master/Loaders/Simple%20Text%20Loader.html) |  [ManrajGrover](https://github.com/ManrajGrover) | <img width="350" src="https://github.com/ManrajGrover/SingleDivProject/blob/master/Assets/Simple%20Text%20Loader.gif" /> |
+| [Simple Text Loader](https://github.com/ManrajGrover/SingleDivProject/blob/master/Loaders/Simple%20Text%20Loader.html) |  [ManrajGrover](https://github.com/ManrajGrover) | <img width="350" src="https://github.com/ManrajGrover/SingleDivProject/blob/master/Assets/Simple%20Text%20Loader.gif" /> 
+|[Melting Ice Cream Loader](https://github.com/taranvohra/SingleDivProject/blob/master/Loaders/Melting%20Ice%20Cream.html) |  [TaranVohra](https://github.com/taranvohra) | <img width="350" src="https://github.com/taranvohra/SingleDivProject/blob/master/Assets/Melting%20Ice%20Cream.gif" /> |
+
 
 ### Flags