<div id="readability-page-1" class="page"><div>
                <div id="SE-ced67039-7156-46bd-9041-5567a8a759ce">
                            <blockquote>
                                <div><p id="SE-a4f1d5ac-08cb-4d2c-b159-c9e5a049d8ef"><span id="SE-9a84c11e-2fb7-462e-a365-dbfc7d71e536">[Web] Pure CSS SVG Spinner Design </span></p><p id="SE-8ceafb16-6503-4a01-a93d-8082abf3167e"><span id="SE-b0830065-01c4-4c61-bb80-2d22719edbb1">- Spinning Square SVG Loader</span></p></div>
                            </blockquote>
                        </div>
                <div id="SE-66a78145-bbb0-45e1-9106-67b6538c4f47">

                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-66a78145-bbb0-45e1-9106-67b6538c4f47&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMDExMTRfMTE0/MDAxNjA1MzM4NzAzMzk0.aLMv6FSN47U4ZeOrzOXhlKol3SOH7gSu7CRB6AO8dxwg.AmHM13otL6n0FBQbySjSo8Hhc_qTSLeux6jDtMZ3vdsg.GIF.backsajang420/spinning-square-svg-loader.gif&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDExMTRfMTE0/MDAxNjA1MzM4NzAzMzk0.aLMv6FSN47U4ZeOrzOXhlKol3SOH7gSu7CRB6AO8dxwg.AmHM13otL6n0FBQbySjSo8Hhc_qTSLeux6jDtMZ3vdsg.GIF.backsajang420/spinning-square-svg-loader.gif?type=w80_blur" data-lazy-src="https://mblogthumb-phinf.pstatic.net/MjAyMDExMTRfMTE0/MDAxNjA1MzM4NzAzMzk0.aLMv6FSN47U4ZeOrzOXhlKol3SOH7gSu7CRB6AO8dxwg.AmHM13otL6n0FBQbySjSo8Hhc_qTSLeux6jDtMZ3vdsg.GIF.backsajang420/spinning-square-svg-loader.gif?type=w800" data-width="490" data-height="455" alt="">
                                    </a>
                                </p>
                        </div>
                                                <div id="SE-e0b5b7b8-0232-4d1c-ba5d-abe18f697ecb">
                                    <p>&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
    &lt;title&gt;Spinning Square SVG Loader&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;svg&gt;
        &lt;rect&gt;&lt;/rect&gt;
    &lt;/svg&gt;
&lt;/body&gt;
&lt;/html&gt;</p>
                                </div>                                <div id="SE-b5dc2a99-c770-4ae7-95be-5d47f288ceb4">
                                    <p>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%;
  }
}</p>
                                </div>                                                    </div></div>

Dev-JeromeBaek.

[Web] Pure CSS SVG Spinner Design - Spinning Square SVG Loader index.html style.css [reperence] - Online Tutorials [github] - https://github.com/Dev-JeromeBaek/awesome-web-styling

[Web] Pure CSS SVG Spinner Design - Spinning Square SVG Loader

댓글