Skip to main content

Loader Inside The Square Box Using Html Css Only

by Rustcode
loader-inside-the-square-box-using-html-css-only

Loader Inside The Square Box Using Html Css Only

Creating a loader inside a square box using only HTML and CSS is an intriguing and visually appealing website loading element. This technique allows web developers to craft a loading animation that not only serves a functional purpose but also adds a touch of elegance to a website.

In this tutorial, we will immerse into the step-by-step process of achieving this effect, exploring the HTML and CSS code required to encapsulate a loading animation within a square container. Whether you're a novice looking to enhance your web development skills or an experienced coder seeking a stylish loading solution, this guide will provide valuable insights into accomplishing the task with simplicity and creativity.

For more webside loader animations you can follow the website loader playlist.

You can read more about web development from this playlist.

 

Table Of Contents

 

 

HTML:

Let's begin with the foundational structure of an HTML document, as depicted below.

<!DOCTYPE html>
<html>
<head>
  <title>Loader Inside The Square Box Using Html Css Only</title>
</head>
<body>

  // Content

</body>
</html>

 

 

Now that we have established the basic HTML structure and ensured that all necessary dependencies are included in the HTML document, it is time to proceed with writing the HTML code, which is provided below. 

<!DOCTYPE html>
<html>
<head>
  <title>Loader Inside The Square Box Using Html Css Only</title>
</head>
<body>

  <div class="content">
	<div class="btn"></div>
	<div class="btn"></div>
	<div class="btn"></div>
	<div class="btn"></div>
	<div class="square"></div>
  </div>

</body>
</html>

 

 

Read Also:

  1. Bookmark Interaction Animation | Html Css And Gsap
  2. Cursor Animation With Hover Effect Using GSAP | HTML, CSS And GSAP
  3. Full Screen Responsive Overlay Navigation Bar Design Using GSAP | HTML ,CSS And GSAP
  4. Gaming CPU Landing Page Design Using GSAP | HTML, CSS And GSAP
  5. Page Loading With Intro Using GSAP | HTML, CSS And GSAP
  6. Page Transition Animation Using GSAP | HTML, CSS And GSAP
  7. Portfolio Landing Page With Animation And Responsiveness | HTML, CSS, jQuery And GSAP
  8. Website Loader Animation Using GSAP | HTML, CSS And GSAP

 

 

CSS:

:root {
   --speed: 8s;
   --size: 40vmin;
   --pink: #ef476f;
   --yellow: #ffd166;
   --green: #06d6a0;
   --blue: #219ebc;
   --dark: #363537;
   --back: var(--pink);
   --sz1: calc(var(--size) / 30);
   --sz2: calc(var(--size) / 15);
   --sp2: calc(calc(var(--speed) / 8) * -2);
   --sp4: calc(calc(var(--speed) / 8) * -4);
   --sp6: calc(calc(var(--speed) / 8) * -6);
}

body {
   margin: 0;
   padding: 0;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #f6f1d1;
}

.content {
   width: var(--size);
   height: var(--size);
   animation: spin var(--speed) linear 0s infinite,
      colors var(--speed) linear calc(calc(var(--speed) / 20) * -1) infinite;
   background: var(--back);
   border-radius: 1px;
   border: var(--sz2) solid var(--dark);
   position: relative;
   box-shadow: 0 0 0 var(--sz1) var(--dark);
}

.square {
   width: calc(calc(100% / 2) * 1);
   height: calc(calc(100% / 2) * 1);
   background: var(--dark);
   animation: jump var(--speed) cubic-bezier(0.73, 0.01, 1, 0.49) calc(var(--speed) / 20) infinite;
   border-radius: 2px;
   left: 50%;
   top: 50%;
   position: absolute;
   box-shadow: 0 0 0 calc(var(--size) / 25) var(--back) inset;
}

@keyframes spin {
   100% {
      transform: rotate(-360deg);
   }
}

@keyframes colors {

   0.01%,
   25% {
      --back: var(--pink);
   }

   25.01%,
   50% {
      --back: var(--yellow);
   }

   50.01%,
   75% {
      --back: var(--green);
   }

   75.01%,
   100% {
      --back: var(--blue);
   }
}

@keyframes jump {

   15%,
   17%,
   25% {
      left: 0%;
      top: 50%;
   }

   16% {
      left: 2%;
      top: 50%;
   }

   40%,
   42%,
   50% {
      left: 0%;
      top: 0%;
   }

   41% {
      left: 0%;
      top: 2%;
   }

   65%,
   67%,
   75% {
      left: 50%;
      top: 0%;
   }

   66% {
      left: 48%;
      top: 0%;
   }

   90%,
   92%,
   100% {
      left: 50%;
      top: 50%;
   }

   91% {
      left: 50%;
      top: 48%;
   }
}

.btn {
   position: absolute;
   width: 25%;
   height: 10%;
   background: #fff;
   bottom: 0;
   left: 62.5%;
   border: var(--sz1) solid var(--dark);
   border-bottom-width: 1px;
   box-sizing: border-box;
   border-radius: 2px 2px 0 0;
   --rays: var(--pink);
   background: var(--rays);
   z-index: 1;
   box-shadow: 0 1px 0 0 var(--dark);
   animation: btn-pink var(--speed) var(--sp2) infinite;
}

.btn:nth-child(2) {
   left: 0%;
   top: 52.5%;
   transform: rotate(90deg);
   transform-origin: left bottom;
   --rays: var(--yellow);
   animation-name: btn-yellow;
   animation-delay: 0s;
}

.btn:nth-child(3) {
   left: 12.5%;
   top: -10%;
   transform: rotate(180deg);
   transform-origin: center bottom;
   --rays: var(--green);
   animation-name: btn-green;
   animation-delay: var(--sp6);
}

.btn:nth-child(4) {
   left: 100%;
   top: 27.5%;
   transform: rotate(-90deg);
   transform-origin: left bottom;
   --rays: var(--blue);
   animation-name: btn-blue;
   animation-delay: var(--sp4);
}

@keyframes btn-yellow {

   0%,
   20%,
   46%,
   100% {
      left: 0%;
   }

   22%,
   44% {
      left: -6.5%;
   }
}

@keyframes btn-green {

   0%,
   20%,
   46%,
   100% {
      top: -10%;
   }

   22%,
   44% {
      top: -16.5%;
   }
}

@keyframes btn-blue {

   0%,
   20%,
   46%,
   100% {
      left: 100%;
   }

   22%,
   44% {
      left: 106.5%;
   }
}

@keyframes btn-pink {

   0%,
   20%,
   46%,
   100% {
      bottom: 0%;
   }

   22%,
   44% {
      bottom: -6.5%;
   }
}

.btn:after,
.content:after {
   content: "";
   --opac: 0;
   width: calc(var(--size) + calc(var(--size) / 8));
   position: absolute;
   height: calc(var(--size) + calc(var(--size) / 8));
   bottom: 0;
   background: conic-gradient(from 0deg at var(--sz2) var(--sz1),
         var(--rays) 0 25%,
         #fff0 0 100%),
      conic-gradient(from 0deg at var(--sz2) var(--sz1),
         var(--rays) 0 25%,
         #fff0 0 100%),
      linear-gradient(90deg,
         var(--rays) 0 var(--sz1),
         #fff0 0 calc(100% - var(--sz1)),
         var(--rays) 0 100%),
      #fff0;
   background-repeat: no-repeat;
   background-size: calc(100% - var(--sz2)) var(--sz2),
      calc(100% - var(--sz2)) var(--sz2), 100% 100%;
   background-position: 0vmin calc(100% + var(--sz1)), 0 0, 0 0;
   left: -387.5%;
   opacity: var(--opac);
   animation: ray-opac var(--speed) ease-out var(--sp2) infinite;
   transform-origin: center bottom;
   transition: --opac 0.25s;
   --detail: conic-gradient(from 0deg at 0 var(--sz1),
         var(--dark) 0 25%,
         #fff0 0 100%);
   background: var(--detail), var(--detail), var(--detail), var(--detail),
      conic-gradient(from 0deg at var(--sz2) var(--sz1),
         var(--rays) 0 25%,
         #fff0 0 100%),
      conic-gradient(from 0deg at var(--sz2) var(--sz1),
         var(--rays) 0 25%,
         #fff0 0 100%),
      linear-gradient(90deg,
         var(--rays) 0 var(--sz1),
         #fff0 0 calc(100% - var(--sz1)),
         var(--rays) 0 100%);
   background-repeat: no-repeat;
   background-size: calc(var(--sz1) + 2px) calc(var(--sz2) / 2.25),
      calc(var(--sz1) + 2px) calc(var(--sz2) / 2.25),
      calc(var(--sz1) + 2px) calc(var(--sz2) / 2.25),
      calc(var(--sz1) + 2px) calc(var(--sz2) / 2.25),
      calc(100% - var(--sz2) + calc(var(--sz1) / 4)) var(--sz2),
      calc(calc(100% - calc(var(--sz2) / 2.5)) - var(--sz1)) var(--sz2), 100% 100%;
   background-position: calc(100% + 1px) var(--sz1), 0vmin var(--sz1),
      calc(100% + 1px) calc(100% - calc(var(--sz1) / 1.1)),
      0px calc(100% - calc(var(--sz1) / 1.1)), 0px calc(100% + var(--sz1)), 0 0, 0 0;
}

.btn:nth-child(1):after,
.btn:nth-child(2):after,
.btn:nth-child(3)::after {
   bottom: -1px;
}

.content:after {
   bottom: calc(var(--sz2) * -0.925);
   left: calc(var(--sz2) * -0.95);
   transform-origin: center bottom;
   --rays: #fff2;
   animation: none;
   opacity: 1;
   display: none;
}

.btn:nth-child(2):before,
.btn:nth-child(2):after {
   animation-delay: 0s;
}

.btn:nth-child(3):before,
.btn:nth-child(3):after {
   animation-delay: var(--sp6);
}

.btn:nth-child(4):before,
.btn:nth-child(4):after {
   animation-delay: var(--sp4);
}

@keyframes ray-opac {

   0%,
   20%,
   46%,
   100% {
      --opac: 0;
      height: 0;
   }

   22%,
   44% {
      --opac: 1;
      height: calc(var(--size) + calc(var(--size) / 8));
   }
}

 

 

Read Also:

  1. Preloader Loading Animation | Html, Css And Gsap
  2. Social Media Buttons Animation With Rotation Hover Effect | Html & Css
  3. Pure CSS Progress Bar Animation | HTML And CSS
  4. Shining Effect On Text | HTML And CSS

 

 

Output:

Loader-Inside-The-Square-Using-Html-Css-Only

 

 

Read Also:

  1. Pure Css Side Navigation Bar Design | HTML And CSS
  2. Responsive Skill Bar Design | Html And Css
  3. Rotating Boxes Website Loader | HTML And CSS
  4. Smooth Parallax Scrolling Effect ( Pure CSS) | HTML And CSS

 

 

Youtube Video:

We also made a youtube video for "Loader Inside The Square Box Using Html Css Only", if you want to watch demo you can click on below video.

 

 

Read Also:

  1. Responsive Manual Image Slider | Html, Css & Javascript
  2. Skewed Background Design | HTML And CSS
  3. Snackbar Notification Animation | HTML, CSS And Javascript
  4. Progress Percentage Circle Design | HTML And CSS
  5. Round Switch Button Animation | HTML And CSS
  6. Responsive Automatic Image Slider | HTML CSS And JavaScript
  7. Simple Login Form Design | HTML And CSS

 

Comments

Post a Comment