{"componentChunkName":"component---src-templates-post-js","path":"/pensieve/loading","result":{"data":{"markdownRemark":{"html":"<p><a href=\"https://codepen.io/bhargavborse/pen/RwZqEMm\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Codepen Demo</a></p>\n<h2>HTML [PUG]</h2>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\">h1(data-text=\"Loading...\") Loading...</code></pre></div>\n<h2>CSS [SCSS]</h2>\n<div class=\"gatsby-highlight\" data-language=\"css\"><pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">body</span><span class=\"token punctuation\">{</span>\n\t<span class=\"token property\">font-family</span><span class=\"token punctuation\">:</span> Lato<span class=\"token punctuation\">,</span> sans-serif<span class=\"token punctuation\">;</span>\n\t\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token selector\">h1</span><span class=\"token punctuation\">{</span>\n\t<span class=\"token property\">margin</span><span class=\"token punctuation\">:</span> 0<span class=\"token punctuation\">;</span>\n\t<span class=\"token property\">padding</span><span class=\"token punctuation\">:</span> 0<span class=\"token punctuation\">;</span>\n\t<span class=\"token property\">text-transform</span><span class=\"token punctuation\">:</span> uppercase<span class=\"token punctuation\">;</span>\n\t<span class=\"token property\">position</span><span class=\"token punctuation\">:</span> absolute<span class=\"token punctuation\">;</span>\n\t<span class=\"token property\">top</span><span class=\"token punctuation\">:</span> 50%<span class=\"token punctuation\">;</span>\n\t<span class=\"token property\">left</span><span class=\"token punctuation\">:</span> 50%<span class=\"token punctuation\">;</span>\n\t<span class=\"token property\">transform</span><span class=\"token punctuation\">:</span> <span class=\"token function\">translate</span><span class=\"token punctuation\">(</span>-50%<span class=\"token punctuation\">,</span> -50%<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\t<span class=\"token property\">font-size</span><span class=\"token punctuation\">:</span> 5em<span class=\"token punctuation\">;</span>\n\t<span class=\"token property\">color</span><span class=\"token punctuation\">:</span> #f5f5f5<span class=\"token punctuation\">;</span>\n\t<span class=\"token property\">letter-spacing</span><span class=\"token punctuation\">:</span> 5px<span class=\"token punctuation\">;</span>\n\t\n\t<span class=\"token selector\">&amp;:before</span><span class=\"token punctuation\">{</span>\n\t\t<span class=\"token property\">content</span><span class=\"token punctuation\">:</span> <span class=\"token function\">attr</span><span class=\"token punctuation\">(</span>data-text<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\t\t<span class=\"token property\">position</span><span class=\"token punctuation\">:</span> absolute<span class=\"token punctuation\">;</span>\n\t\t<span class=\"token property\">top</span><span class=\"token punctuation\">:</span> 0<span class=\"token punctuation\">;</span>\n\t\t<span class=\"token property\">left</span><span class=\"token punctuation\">:</span> 0<span class=\"token punctuation\">;</span>\n\t\t<span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 100%<span class=\"token punctuation\">;</span>\n\t\t<span class=\"token property\">height</span><span class=\"token punctuation\">:</span> 100%<span class=\"token punctuation\">;</span>\n\t\t<span class=\"token property\">color</span><span class=\"token punctuation\">:</span> #000<span class=\"token punctuation\">;</span>\n\t\t<span class=\"token property\">overflow</span><span class=\"token punctuation\">:</span> hidden<span class=\"token punctuation\">;</span>\n\t\t<span class=\"token property\">animation</span><span class=\"token punctuation\">:</span> animate 10s linear infinite<span class=\"token punctuation\">;</span>\n\t\t<span class=\"token property\">border-right</span><span class=\"token punctuation\">:</span> 3px solid #000<span class=\"token punctuation\">;</span>\n\t<span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token atrule\"><span class=\"token rule\">@keyframes</span> animate</span>\n<span class=\"token punctuation\">{</span>\n\t<span class=\"token selector\">0%</span><span class=\"token punctuation\">{</span>\n\t\t<span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 0<span class=\"token punctuation\">;</span>\n\t<span class=\"token punctuation\">}</span>\n\t<span class=\"token selector\">50%</span><span class=\"token punctuation\">{</span>\n\t\t<span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 100%<span class=\"token punctuation\">;</span>\n\t<span class=\"token punctuation\">}</span>\n\t<span class=\"token selector\">100%</span><span class=\"token punctuation\">{</span>\n\t\t<span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 0<span class=\"token punctuation\">;</span>\n\t<span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>","frontmatter":{"title":"Loading","description":"Loading animation for the page","date":"2019-12-03T00:00:00.000Z","slug":"/pensieve/loading","tags":["Loading Animation"]}}},"pageContext":{}},"staticQueryHashes":["1994492073","2681795072","3391063840","604461682"]}