<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>loading Archives - scmGalaxy</title>
	<atom:link href="https://www.scmgalaxy.com/tutorials/tag/loading/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.scmgalaxy.com/tutorials/tag/loading/</link>
	<description>A Platform for Software Engineers</description>
	<lastBuildDate>Wed, 13 Apr 2022 16:34:28 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1</generator>
	<item>
		<title>How to create a line loading effect &#038; growing lines loading animation using HTML &#038; CSS?</title>
		<link>https://www.scmgalaxy.com/tutorials/how-to-create-a-line-loading-effect-growing-lines-loading-animation-using-html-css/</link>
					<comments>https://www.scmgalaxy.com/tutorials/how-to-create-a-line-loading-effect-growing-lines-loading-animation-using-html-css/#respond</comments>
		
		<dc:creator><![CDATA[rajeshkumar]]></dc:creator>
		<pubDate>Tue, 14 Sep 2021 12:53:00 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[animation]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[effects]]></category>
		<category><![CDATA[growing]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[lines]]></category>
		<category><![CDATA[loading]]></category>
		<guid isPermaLink="false">https://www.scmgalaxy.com/tutorials/?p=9022</guid>

					<description><![CDATA[<p>In this blog, I am creating a line loading effect &#38; growing lines loading animation using HTML &#38; CSS. So, [&#8230;]</p>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/how-to-create-a-line-loading-effect-growing-lines-loading-animation-using-html-css/">How to create a line loading effect &#038; growing lines loading animation using HTML &#038; CSS?</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">In this blog, I am creating a line loading effect &amp; growing lines loading animation using <strong>HTML </strong>&amp; <strong>CSS</strong>. So, Let’s create an <strong>index.html &amp; style.css </strong>below-</p>



<script src="https://gist.github.com/ajcotocus/e49b4431f5dc707666a29c33cd1a9ec1.js"></script>



<script src="https://gist.github.com/ajcotocus/baef8a407e6fa9de864b8fe93bdc463d.js"></script>



<figure class="wp-block-image size-full"><img fetchpriority="high" decoding="async" width="657" height="286" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-82.png" alt="" class="wp-image-9023" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-82.png 657w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-82-300x131.png 300w" sizes="(max-width: 657px) 100vw, 657px" /><figcaption>Growing lines loading with CSS animation</figcaption></figure>



<script src="https://gist.github.com/ajcotocus/82b34a2c56bc1413dc1083713553107d.js"></script>



<script src="https://gist.github.com/ajcotocus/5a7ae2d40428542ea69967edd4316874.js"></script>



<figure class="wp-block-image size-full"><img decoding="async" width="702" height="230" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-83.png" alt="" class="wp-image-9024" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-83.png 702w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-83-300x98.png 300w" sizes="(max-width: 702px) 100vw, 702px" /><figcaption>Line loading effect</figcaption></figure>



<script src="https://gist.github.com/ajcotocus/aa4c62bc8b5a5476ce99bb842f85a6e9.js"></script>



<script src="https://gist.github.com/ajcotocus/4c95ab0eea9eed9788c898a1166e2719.js"></script>



<figure class="wp-block-image size-full"><img decoding="async" width="673" height="282" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-84.png" alt="" class="wp-image-9025" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-84.png 673w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-84-300x126.png 300w" sizes="(max-width: 673px) 100vw, 673px" /><figcaption>Nice loading effect</figcaption></figure>



<script src="https://gist.github.com/ajcotocus/6ca8f51bb8764018cca42b4982ad2b6e.js"></script>



<script src="https://gist.github.com/ajcotocus/4c81d8ebef4587cf3e5a854e7511a684.js"></script>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="866" height="516" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-85.png" alt="" class="wp-image-9026" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-85.png 866w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-85-300x179.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-85-768x458.png 768w" sizes="auto, (max-width: 866px) 100vw, 866px" /><figcaption>Nice loading effect with CSS animations</figcaption></figure>



<script src="https://gist.github.com/ajcotocus/eac5514a7be9722e95a780dc217ccbed.js"></script>



<script src="https://gist.github.com/ajcotocus/9fa065320f3cc467707e07c9b9976e87.js"></script>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="913" height="580" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-86.png" alt="" class="wp-image-9029" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-86.png 913w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-86-300x191.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-86-768x488.png 768w" sizes="auto, (max-width: 913px) 100vw, 913px" /><figcaption>Ring loading effect</figcaption></figure>



<script src="https://gist.github.com/ajcotocus/065cab29c9ce4f7467b78d8e8deec027.js"></script>



<script src="https://gist.github.com/ajcotocus/b55868f22d84b17d1c0d719b856012d2.js"></script>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="922" height="510" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-87.png" alt="" class="wp-image-9032" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-87.png 922w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-87-300x166.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-87-768x425.png 768w" sizes="auto, (max-width: 922px) 100vw, 922px" /><figcaption>Nice loading effect with CSS animations</figcaption></figure>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/how-to-create-a-line-loading-effect-growing-lines-loading-animation-using-html-css/">How to create a line loading effect &#038; growing lines loading animation using HTML &#038; CSS?</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.scmgalaxy.com/tutorials/how-to-create-a-line-loading-effect-growing-lines-loading-animation-using-html-css/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>How to create a nice loading effect &#038; preloader  animations using HTML &#038; CSS?</title>
		<link>https://www.scmgalaxy.com/tutorials/how-to-create-a-nice-loading-effect-preloader-animations-using-html-css/</link>
					<comments>https://www.scmgalaxy.com/tutorials/how-to-create-a-nice-loading-effect-preloader-animations-using-html-css/#respond</comments>
		
		<dc:creator><![CDATA[rajeshkumar]]></dc:creator>
		<pubDate>Mon, 13 Sep 2021 13:11:43 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[animations]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[effect]]></category>
		<category><![CDATA[loading]]></category>
		<category><![CDATA[nice]]></category>
		<category><![CDATA[preloader]]></category>
		<guid isPermaLink="false">https://www.scmgalaxy.com/tutorials/?p=9003</guid>

					<description><![CDATA[<p>In this blog, I am creating a nice loading effect &#38; preloader animations using HTML &#38; CSS. So, Let’s create [&#8230;]</p>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/how-to-create-a-nice-loading-effect-preloader-animations-using-html-css/">How to create a nice loading effect &#038; preloader  animations using HTML &#038; CSS?</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">In this blog, I am creating a nice loading effect &amp; preloader animations using <strong>HTML </strong>&amp; <strong>CSS</strong>. So, Let’s create an <strong>index.html &amp; style.css </strong>below-</p>



<script src="https://gist.github.com/ajcotocus/dd3149920ebca63b966ad58a3cfc9ea3.js"></script>



<script src="https://gist.github.com/ajcotocus/e2ada2f271f62b82a926acc75f18de2f.js"></script>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="554" height="369" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-79.png" alt="" class="wp-image-9004" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-79.png 554w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-79-300x200.png 300w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-79-392x260.png 392w" sizes="auto, (max-width: 554px) 100vw, 554px" /><figcaption>Loading effect with CSS animations</figcaption></figure>



<script src="https://gist.github.com/ajcotocus/ecf6bb8f89b1b361915ffe72bbaea2cd.js"></script>



<script src="https://gist.github.com/ajcotocus/0797a0043ccfc041f77fe37da41a7a87.js"></script>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="515" height="356" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-80.png" alt="" class="wp-image-9005" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-80.png 515w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-80-300x207.png 300w" sizes="auto, (max-width: 515px) 100vw, 515px" /><figcaption>Loading effect with CSS animations 2</figcaption></figure>



<script src="https://gist.github.com/ajcotocus/c0d2b0583f74cf4d251799f9898e0f4e.js"></script>



<script src="https://gist.github.com/ajcotocus/2faf99ae3ec2d1f8771149dc2462f22b.js"></script>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="623" height="248" src="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-81.png" alt="" class="wp-image-9007" srcset="https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-81.png 623w, https://www.scmgalaxy.com/tutorials/wp-content/uploads/2021/09/image-81-300x119.png 300w" sizes="auto, (max-width: 623px) 100vw, 623px" /><figcaption>Preloader using CSS animations</figcaption></figure>
<p>The post <a href="https://www.scmgalaxy.com/tutorials/how-to-create-a-nice-loading-effect-preloader-animations-using-html-css/">How to create a nice loading effect &#038; preloader  animations using HTML &#038; CSS?</a> appeared first on <a href="https://www.scmgalaxy.com/tutorials">scmGalaxy</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.scmgalaxy.com/tutorials/how-to-create-a-nice-loading-effect-preloader-animations-using-html-css/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
