Today we are going to learn how to create a loading screen. Now you will have a question, Why do we need a loading screen? And What is a loading screen?
Table of Contents
What is the loading screen?
Those are usually called Splash Screens. A splash screen is a graphical control element consisting of a window containing an image, a logo, and the current version of the software. A splash screen usually appears while a game or program is launching.
Why do we need a loading screen?
Loading screens or splash screens are commonly used to provide important information about the upcoming stage/content or keep the user entertained/engaged in other ways while the website loads. It helps the Developer to engage the audience.
Loading Screen Animation Using CSS
For creating Loading Animation we will create index.html and style.css file.
index.html
<!DOCTYPE html>
<head>
<title>Loading Screen Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='wrap'>
<div class='angle'></div>
<div class='angle'></div>
<div class='angle'></div>
<div class='angle'></div>
</div>
<svg version='1.1' xmlns='http://www.w3.org/2000/svg'>
<defs>
<filter id='goo'>
<fegaussianblur in='SourceGraphic' result='blur' stddeviation='12'></fegaussianblur>
<fecolormatrix in='blur' mode='matrix' result='goo' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9'></fecolormatrix>
<fecomposite in2='goo' in='SourceGraphic' operator='atop'></fecomposite>
</filter>
</defs>
</svg>
</body>
</html>style.css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
background-color: white;
}
body svg {
position: absolute;
width: 0;
height: 0;
}
body .wrap {
width: 400px;
height: 900px;
position: relative;
-webkit-animation: scrollup 6s linear infinite;
animation: scrollup 6s linear infinite;
filter: url("#goo");
}
@-webkit-keyframes scrollup {
from {
transform: scale(0.75) translateY(100px);
}
to {
transform: scale(0.75) translateY(-100px);
}
}
@keyframes scrollup {
from {
transform: scale(0.75) translateY(100px);
}
to {
transform: scale(0.75) translateY(-100px);
}
}
body .wrap .angle {
position: absolute;
width: 200px;
height: 200px;
left: calc(50% - 50px);
filter: contrast(10px);
}
body .wrap .angle:first-of-type {
-webkit-animation: rolldown 6s ease-in-out infinite;
animation: rolldown 6s ease-in-out infinite;
}
@-webkit-keyframes rolldown {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
@keyframes rolldown {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
body .wrap .angle:first-of-type:before {
-webkit-animation: rolldown2 6s ease-in-out infinite;
animation: rolldown2 6s ease-in-out infinite;
transform-origin: top right;
}
@-webkit-keyframes rolldown2 {
0% {
transform: rotate(0deg);
}
12.5% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
@keyframes rolldown2 {
0% {
transform: rotate(0deg);
}
12.5% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
body .wrap .angle:nth-of-type(2) {
-webkit-animation: rolldown3 6s ease-in-out infinite;
animation: rolldown3 6s ease-in-out infinite;
transform-origin: left;
}
@-webkit-keyframes rolldown3 {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(0deg);
}
37.5% {
transform: rotate(-180deg);
}
100% {
transform: rotate(-180deg);
}
}
@keyframes rolldown3 {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(0deg);
}
37.5% {
transform: rotate(-180deg);
}
100% {
transform: rotate(-180deg);
}
}
body .wrap .angle:nth-of-type(2):before {
-webkit-animation: rolldown4 6s ease-in-out infinite;
animation: rolldown4 6s ease-in-out infinite;
transform-origin: top left;
}
@-webkit-keyframes rolldown4 {
0% {
transform: rotate(0deg);
}
37.5% {
transform: rotate(0deg);
}
50% {
transform: rotate(-180deg);
}
100% {
transform: rotate(-180deg);
}
}
@keyframes rolldown4 {
0% {
transform: rotate(0deg);
}
37.5% {
transform: rotate(0deg);
}
50% {
transform: rotate(-180deg);
}
100% {
transform: rotate(-180deg);
}
}
body .wrap .angle:nth-of-type(3) {
-webkit-animation: rolldown5 6s ease-in-out infinite;
animation: rolldown5 6s ease-in-out infinite;
}
@-webkit-keyframes rolldown5 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
62.5% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
@keyframes rolldown5 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
62.5% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
body .wrap .angle:nth-of-type(3):before {
-webkit-animation: rolldown6 6s ease-in-out infinite;
animation: rolldown6 6s ease-in-out infinite;
transform-origin: top right;
}
@-webkit-keyframes rolldown6 {
0% {
transform: rotate(0deg);
}
62.5% {
transform: rotate(0deg);
}
75% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
@keyframes rolldown6 {
0% {
transform: rotate(0deg);
}
62.5% {
transform: rotate(0deg);
}
75% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
body .wrap .angle:nth-of-type(4) {
-webkit-animation: rolldown7 6s ease-in-out infinite;
animation: rolldown7 6s ease-in-out infinite;
transform-origin: left;
}
@-webkit-keyframes rolldown7 {
0% {
transform: rotate(0deg);
}
75% {
transform: rotate(0deg);
}
87.5% {
transform: rotate(-180deg);
}
100% {
transform: rotate(-180deg);
}
}
@keyframes rolldown7 {
0% {
transform: rotate(0deg);
}
75% {
transform: rotate(0deg);
}
87.5% {
transform: rotate(-180deg);
}
100% {
transform: rotate(-180deg);
}
}
body .wrap .angle:nth-of-type(4):before {
-webkit-animation: rolldown8 6s ease-in-out infinite;
animation: rolldown8 6s ease-in-out infinite;
transform-origin: top left;
}
@-webkit-keyframes rolldown8 {
0% {
transform: rotate(0deg);
}
87.5% {
transform: rotate(0deg);
}
100% {
transform: rotate(-180deg);
}
}
@keyframes rolldown8 {
0% {
transform: rotate(0deg);
}
87.5% {
transform: rotate(0deg);
}
100% {
transform: rotate(-180deg);
}
}
body .wrap .angle:nth-of-type(1) {
top: calc((50% - 250px) + (0 * 50px));
}
body .wrap .angle:nth-of-type(1):before {
content: "";
position: absolute;
width: 50%;
height: 50%;
background: linear-gradient(to right, #b21f1f, #fdbb2d 150%);
}
body .wrap .angle:nth-of-type(even):before {
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
body .wrap .angle:nth-of-type(odd):before {
-webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
body .wrap .angle:nth-of-type(2) {
top: calc((50% - 250px) + (1 * 50px));
}
body .wrap .angle:nth-of-type(2):before {
content: "";
position: absolute;
width: 50%;
height: 50%;
background: linear-gradient(to right, #b21f1f, #fdbb2d 150%);
}
body .wrap .angle:nth-of-type(even):before {
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
body .wrap .angle:nth-of-type(odd):before {
-webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
body .wrap .angle:nth-of-type(3) {
top: calc((50% - 250px) + (2 * 50px));
}
body .wrap .angle:nth-of-type(3):before {
content: "";
position: absolute;
width: 50%;
height: 50%;
background: linear-gradient(to right, #b21f1f, #fdbb2d 150%);
}
body .wrap .angle:nth-of-type(even):before {
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
body .wrap .angle:nth-of-type(odd):before {
-webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
body .wrap .angle:nth-of-type(4) {
top: calc((50% - 250px) + (3 * 50px));
}
body .wrap .angle:nth-of-type(4):before {
content: "";
position: absolute;
width: 50%;
height: 50%;
background: linear-gradient(to right, #b21f1f, #fdbb2d 150%);
}
body .wrap .angle:nth-of-type(even):before {
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
body .wrap .angle:nth-of-type(odd):before {
-webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
clip-path: polygon(100% 0, 100% 100%, 0 50%);
}If you are bored of copying this just click on git link and clone the repository Click Here!
