Scroll To Top

How To Create Typing Loader Pure CSS and HTML Code

Posted in Code, Tech5 months ago • Written by Murtaxa2 Comments
How To Create Typing Loader Pure CSS and HTML Code

How To Create Typing Loader Pure CSS and HTML Code

In computing, a loader is the part of an operating system that is responsible for loading programs and libraries. It is one of the essential stages in the process of starting a program, as it places programs into memory and prepares them for execution. This is my own code How To Create Typing Loader Pure CSS and HTML Code.This is an easy example of typing loader that you can use it at any project you want. The code is neat and you can bring changes on it. Just follow this two steps:

Step1) Add HTML Code:

<div class="span">
    <div class="typing_loader"></div>
</div>

Step2) Add CSS code (Style):

*{
  box-sizing: border-box;
}
html{
  color: #fff;
  font-family: 'Source Sans Pro', sans-serif;
  background-color: #59488b;
}
.typing_loader{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: typing 1s linear infinite alternate;
  margin: 100px auto;
  position: relative;
  left: -12px;
}
@keyframes typing{
  0%{
     background-color: rgba(255,255,255,1);
     box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
		 24px 0px 0px 0px rgba(255,255,255,0.2);
    }
 25%{
     background-color: rgba(255,255,255,0.4);
     box-shadow: 12px 0px 0px 0px rgba(255,255,255,2),
		 24px 0px 0px 0px rgba(255,255,255,0.2);
    }
 75%{
     background-color: rgba(255,255,255,0.4);
     box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
		 24px 0px 0px 0px rgba(255,255,255,1);
    }
}

For more information watch my video and subscribe my channel

TAGS: , , , , , ,

2 Comments so far. Feel free to join this conversation.

  1. bdsm lovers March 6, 2017 at 12:18 am - Reply

    FmjrNw Some truly quality articles on this internet site , saved to fav.

  2. Website Traffic March 8, 2017 at 4:53 am - Reply

    Buy Website Traffic from the leading worldwide traffic supplier. Buy Traffic from our trusted USA based company to increase your targeted web traffic today!

Leave A Response