HTML

1
2
<div class="loading-container">
  <div class="loading-square" id="square1"></div>
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS

1
2
.loading-square {
  background: #ddd;
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

JS

1
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

.loading-square {
  background: #ddd;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -5px;
  margin-left: -5px;
}

#square1 {
  margin-top: -25px;
  margin-left: -25px;
  -webkit-animation: loadingAnimation 675ms ease-in-out 0s infinite alternate;
          animation: loadingAnimation 675ms ease-in-out 0s infinite alternate;
}

#square2 {
  margin-top: -25px;
  -webkit-animation: loadingAnimation 675ms ease-in-out 75ms infinite alternate;
          animation: loadingAnimation 675ms ease-in-out 75ms infinite alternate;
}

#square3 {
  margin-top: -25px;
  margin-left: 15px;
  -webkit-animation: loadingAnimation 675ms ease-in-out 150ms infinite;
          animation: loadingAnimation 675ms ease-in-out 150ms infinite;
}

#square4 {
  margin-left: -25px;
  -webkit-animation: loadingAnimation 675ms ease-in-out 225ms infinite;
          animation: loadingAnimation 675ms ease-in-out 225ms infinite;
}

#square5 {
  -webkit-animation: loadingAnimation 675ms ease-in-out 300ms infinite;
          animation: loadingAnimation 675ms ease-in-out 300ms infinite;
}

#square6 {
  margin-left: 15px;
  -webkit-animation: loadingAnimation 675ms ease-in-out 375ms infinite;
          animation: loadingAnimation 675ms ease-in-out 375ms infinite;
}

#square7 {
  margin-top: 15px;
  margin-left: -25px;
  -webkit-animation: loadingAnimation 675ms ease-in-out 450ms infinite;
          animation: loadingAnimation 675ms ease-in-out 450ms infinite;
}

#square8 {
  margin-top: 15px;
  -webkit-animation: loadingAnimation 675ms ease-in-out 525ms infinite;
          animation: loadingAnimation 675ms ease-in-out 525ms infinite;
}

#square9 {
  margin-top: 15px;
  margin-left: 15px;
  -webkit-animation: loadingAnimation 675ms ease-in-out 600ms infinite;
          animation: loadingAnimation 675ms ease-in-out 600ms infinite;
}

@-webkit-keyframes loadingAnimation {
  from {
    opacity: 0;
  }

to {
    opacity: 1;
  }
}

@keyframes loadingAnimation {
  from {
    opacity: 0;
  }

to {
    opacity: 1;
  }
}

Square Loader Without Using SVG Icons

This big square loader consists of nine smaller animated squares. The ideal behind this is very simple: it uses the keyframes property to control the opacity of the smaller squares.

opacity of 0 will hide the square, and opacity of 1 will make it visible. CSS code is doing this animation infinitely to create the loading effect.