Connect with us

PC Drafts

Loading circle animation html and css | preloader

Loading circle animation html and css

Programming

Loading circle animation html and css | preloader

Loading circle animation html and css | preloader

Loading circle animation html and css

In this Html and Css tutorials video we have discussed that you will create “loading circle animation html and css

These loading spinners are very important part of a applications user interface and have a huge impact on user or customer of a web applications.

 

Loading circle animation html and css tutorial :

Loading circle animation source code :

File : index.html
code :

<!DOCTYPE html>
<html lang=”es”>
<head>
<link rel=”stylesheet” href=”style.css”></head>
<body>
<div class=”loading-container”>
<div class=”loading”></div>
<div id=”loading-text”>loading</div>
</div>
</body>
</html>

 

File : style.css
code :

#link {color: #E45635;display:block;font: 12px “Helvetica Neue”, Helvetica, Arial, sans-serif;text-align:center; text-decoration: none;}
#link:hover {color: #CCCCCC}#link, #link:hover {-webkit-transition: color 0.5s ease-out;-moz-transition: color 0.5s ease-out;-ms-transition: color 0.5s ease-out;-o-transition: color 0.5s ease-out;transition: color 0.5s ease-out;}/** BEGIN CSS **/
body {background: #333333;}
@keyframes rotate-loading {
0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}@-moz-keyframes rotate-loading {
0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate-loading {
0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@keyframes rotate-loading {
0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-moz-keyframes rotate-loading {
0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate-loading {
0% {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@keyframes loading-text-opacity {
0% {opacity: 0}
20% {opacity: 0}
50% {opacity: 1}
100%{opacity: 0}
}

@-moz-keyframes loading-text-opacity {
0% {opacity: 0}
20% {opacity: 0}
50% {opacity: 1}
100%{opacity: 0}
}

@-webkit-keyframes loading-text-opacity {
0% {opacity: 0}
20% {opacity: 0}
50% {opacity: 1}
100%{opacity: 0}
}

@-o-keyframes loading-text-opacity {
0% {opacity: 0}
20% {opacity: 0}
50% {opacity: 1}
100%{opacity: 0}
}
.loading-container,
.loading {
height: 100px;
position: relative;
width: 100px;
border-radius: 100%;
}

 

.loading-container { margin: 40px auto }

.loading {
border: 2px solid transparent;
border-color: transparent #fff transparent #FFF;
-moz-animation: rotate-loading 1.5s linear 0s infinite normal;
-moz-transform-origin: 50% 50%;
-o-animation: rotate-loading 1.5s linear 0s infinite normal;
-o-transform-origin: 50% 50%;
-webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
-webkit-transform-origin: 50% 50%;
animation: rotate-loading 1.5s linear 0s infinite normal;
transform-origin: 50% 50%;
}

.loading-container:hover .loading {
border-color: transparent #E45635 transparent #E45635;
}
.loading-container:hover .loading,
.loading-container .loading {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#loading-text {
-moz-animation: loading-text-opacity 2s linear 0s infinite normal;
-o-animation: loading-text-opacity 2s linear 0s infinite normal;
-webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
animation: loading-text-opacity 2s linear 0s infinite normal;
color: #ffffff;
font-family: “Helvetica Neue, “Helvetica”, “”arial”;
font-size: 10px;
font-weight: bold;
margin-top: 45px;
opacity: 0;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 0;
width: 100px;
}

 

 

 

OR download the code

Loading circle animation source code :

 

Download link of loading circle source code 

 

Java tutorials with source code :

1. How to make Analogue clock in java | Analog clock in java with source code : https://youtu.be/pa87V3H5HC0
2. Chess game in Java | Chess game with Source code : https://youtu.be/pa87V3H5HC0
3. How to make analogue stopwatch in java | Stop watch in java : https://youtu.be/bb2eoXMfg20
4. Brick Breaker game in java | Brick Breake java game with source code: https://youtu.be/zEbq5GHv3cc
5. JProgressBar Tutorial Java with source code : https://youtu.be/Zc9LKcmaiK4

  • Loading circle animation html and css
  • Loading circle animation html and css
Continue Reading
You may also like...

Abdur Rehman (Born July 7, 1993) is a student of Software Engineering and a founder of pcdrafts.com. I am a graphic designer, blogger, geek and a man behind the pcdrafts.com. I am currently living in Peshawar, Pakistan. With integrated time along with my study, I have been working on the different computer project. Recently I am working with the organization named E-MO. I love to learn and experience new stuff and put them to the test. I love spending time on the computer and reading books and so on.

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

More in Programming

Like Us OnFacebook

Popular Posts

To Top