LOADING SCREEN ANIMATION USING HTML & CSS
LOADING SCREEN ANIMATION USING HTML & CSS

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!

Code is Available on Github. Click Here!

Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply