Professional Web Templates

HTML

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  background: #677D6A;
  min-height: 100vh;
  padding: 10px;
}

.loader{
    width: 50px;
    height: 50px;
    margin: 50px auto 0;
    position: relative;
    animation: animate 2s linear infinite;
}
.loader .dot{
    width: 20px;
    height: 20px;
    margin: auto;
    border-radius: 100%;
    position: absolute;
}
.loader .dot:nth-child(1){
    background: #ff4444;
    top: 0;
    left: 0;
}
.loader .dot:nth-child(2){
    background: #ffbb33;
    top: 0;
    right: 0;
}
.loader .dot:nth-child(3){
    background: #99cc00;
    bottom: 0;
    left: 0;
}
.loader .dot:nth-child(4){
    background: #33b5e5;
    bottom: 0;
    right: 0;
}
@keyframes animate{
          0% { transform: scale(1) rotate(0); }
    20%, 25% { transform: scale(1.3) rotate(90deg); }
    45%, 50% { transform: scale(1) rotate(180deg);  }
    70%, 75% { transform: scale(1.3) rotate(270deg); }
   95%, 100% { transform: scale(1) rotate(360deg); }
}

HTML

CSS

JS

Output