feat: Add new spinner animation "Spinning Square SVG Loader"

seungyeub · seungyeub · commit 0cb862b738ed · 2020-11-15T15:12:36.000+09:00
diff --git a/README.md b/README.md
@@ -242,6 +242,10 @@ There will be continuous updates in the future. Thank you!
   <img src="static/image/html5.png" width="20px">
   <img src="static/image/css3.png" width="20px">
 
+- [Spinning Square SVG Loader](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/loading/spinning-square-svg-loader)
+  <img src="static/image/html5.png" width="20px">
+  <img src="static/image/css3.png" width="20px">
+
 - [Widget Spinner Loading](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/loading/widget-spinner-loading)
   <img src="static/image/html5.png" width="20px">
   <img src="static/image/css3.png" width="20px">
diff --git a/gifs/loading/spinning-square-svg-loader.gif b/gifs/loading/spinning-square-svg-loader.gif
diff --git a/loading/README.MD b/loading/README.MD
@@ -24,6 +24,8 @@
 
 - [Simple square point loading](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/loading/simple-square-point-loading)
 
+- [Spinning Square SVG Loader](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/loading/spinning-square-svg-loader)
+
 - [Widget Spinner Loading](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/loading/widget-spinner-loading)
 
 ---
diff --git a/loading/spinning-square-svg-loader/README.md b/loading/spinning-square-svg-loader/README.md
@@ -0,0 +1,3 @@
+## Widget Spinner Loading
+
+![Edit [Web] Spinning Square SVG Loader](../../gifs/loading/spinning-square-svg-loader.gif)
diff --git a/loading/spinning-square-svg-loader/index.html b/loading/spinning-square-svg-loader/index.html
@@ -0,0 +1,18 @@
+<html>
+
+<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">
+    <link rel="shortcut icon" href="../../favicon.ico">
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <title>Spinning Square SVG Loader</title>
+</head>
+
+<body>
+    <svg>
+        <rect></rect>
+    </svg>
+</body>
+
+</html>
diff --git a/loading/spinning-square-svg-loader/style.css b/loading/spinning-square-svg-loader/style.css
@@ -0,0 +1,31 @@
+body {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: #042331;
+}
+
+svg {
+  width: 100px;
+  height: 100px;
+}
+
+svg rect {
+  width: 100px;
+  height: 100px;
+  fill: none;
+  stroke-width: 100px;
+  stroke: #00adff;
+  stroke-dasharray: 100;
+  stroke-dashoffset: 50%;
+  animation: animate 2s linear infinite;
+}
+
+@keyframes animate {
+  to {
+    stroke-dashoffset: 250%;
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+## Widget Spinner Loading`
	`2`	`+`
	`3`	`+![Edit [Web] Spinning Square SVG Loader](../../gifs/loading/spinning-square-svg-loader.gif)`