If you want to use this code in your Editor, Then Remember You should Have to Remove The Comment Symbols /* From the Code.
In order to Do That Before The Body Section Of this Coding Remove /* This Symbols From Code.
Loading Design 1:
In order to Do That Before The Body Section Of this Coding Remove /* This Symbols From Code.
Loading Design 1:
It is a simple and colorful text loading progress indicator. It can be used on any website for displaying the progress.
This design is created using HTML and CSS 3 both.
Loading Design 2:
<!DOCTYPE html>
<html>
<head>
<title>glowing loading</title>
<style type="text/css">
/*body
{
margin: 0;
padding: 0;
background: #262626;
}
ul
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
padding: 0;
display: flex;
}
ul li
{
list-style: none;
color: #484848;
font-family: arial;
font-size: 5em;
letter-spacing: 15px;
animation: animate 1.4s linear infinite;
}
@keyframes animate
{
0%
{
color: #484884;
text-shadow: none;
}
90%
{
color: #48484888;
text-shadow: none;
}
100%
{
color: #fff900;
text-shadow: 0 0 7px #fff900 , 0 0 50px #ff6c00;
}
}
ul li:nth-child(1)
{
animation-delay: .4s;
}
ul li:nth-child(2)
{
animation-delay: .6s;
font-size: 100px;
}
ul li:nth-child(3)
{
animation-delay: .8s;
}
ul li:nth-child(4)
{
animation-delay: 1s;
}
ul li:nth-child(5)
{
animation-delay: 1.2s;
font-size: 150px;
animation-duration: 7s;
}
ul li:nth-child(6)
{
animation-delay: .4s;
font-size: 120px;
}
</style>
</head>
<body>
<ul>
<li>L</li>
<li>O</li>
<li>A</li>
<li>D</li>
<li>I</li>
<li>N</li>
<li>G</li>
</ul>
</body>
</html>
Loading Design 2:
It is an attractive and beautiful css3 loading design. It consists of Texts which are glowing and shinning using CSS. But this design is a little bit different from the above design, I have only changed the CSS part of the code make it a little beautiful.
I have used both CSS and HTML for achieving this beautiful design.
Loading Design 3:
Loading Design 3 is amazing because in this design I have also changed the position of texts. It is continuously glowing and shinning.
I have used both CSS and Html for achieving this beautiful design.
<!DOCTYPE html>
<html>
<head>
<title>glowing loading</title>
<style type="text/css">
/*body
{
margin: 0;
padding: 0;
background: #262626;
}
ul
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
padding: 0;
display: flex;
}
ul li
{
list-style: none;
color: #484848;
font-family: arial;
font-size: 5em;
letter-spacing: 15px;
animation: animate 1.4s linear infinite;
}
@keyframes animate
{
0%
{
color: yellow;
text-shadow: none;
}
90%
{
color:violet ;
text-shadow: none;
}
100%
{
color: white;
text-shadow: 0 0 7px #fff900 , 0 0 50px #ff6c0011;
}
}
ul li:nth-child(1)
{
animation-delay: .2s;
}
ul li:nth-child(2)
{
animation-delay: .4s;
}
ul li:nth-child(3)
{
animation-delay: .6s;
}
ul li:nth-child(4)
{
animation-delay: .8s;
}
ul li:nth-child(5)
{
animation-delay: 1s;
}
ul li:nth-child(6)
{
animation-delay: 1.2s;
}
ul li:nth-child(7)
{
animation-delay: 1.4s;
}
</style>
</head>
<body>
<ul>
<li>L</li>
<li>O</li>
<li>A</li>
<li>D</li>
<li>I</li>
<li>N</li>
<li>G</li>
</ul>
</body>
</html>
Loading Design 3:
Loading Design 3 is amazing because in this design I have also changed the position of texts. It is continuously glowing and shinning.
I have used both CSS and Html for achieving this beautiful design.
<!DOCTYPE html>If You enjoy the above designs please share it and comment on us. Also, Subscribe for future Amazing Designs.
<html>
<head>
<title>glowing loading</title>
<style type="text/css">
/*body
{
margin: 0;
padding: 0;
background: #262626;
}
ul
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
padding: 0;
display: flex;
}
ul li
{
list-style: none;
color: #484848;
font-family: arial;
font-size: 5em;
letter-spacing: 15px;
animation: animate 1.4s linear infinite;
}
@keyframes animate
{
0%
{
color: #484884;
text-shadow: none;
}
90%
{
color: #48484888;
text-shadow: none;
}
100%
{
color: #fff900;
text-shadow: 0 0 7px #fff900 , 0 0 50px #ff6c00;
}
}
ul li:nth-child(1)
{
animation-delay: .2s;
}
ul li:nth-child(2)
{
animation-delay: .4s;
}
ul li:nth-child(3)
{
animation-delay: .6s;
}
ul li:nth-child(4)
{
animation-delay: .8s;
}
ul li:nth-child(5)
{
animation-delay: 1s;
}
ul li:nth-child(6)
{
animation-delay: 1.2s;
}
ul li:nth-child(7)
{
animation-delay: 1.4s;
}
</style>
</head>
<body>
<ul>
<li>L</li>
<li>O</li>
<li>A</li>
<li>D</li>
<li>I</li>
<li>N</li>
<li>G</li>
</ul>
</body>
</html>
Thanks
0 Comments
Welcome! Please Comment Without Any Hesitation.
Thank You