CODEWITHSUNDEEP
htmlcss
user7030651
user7030651

Reputation:

CSS3 : Loader Animation

Image

Hello, I want to have a loader like in the image.

I have tried this code. I have square div, instead I want rectangle div just like in the image.

@-moz-keyframes throbber {
  0% {
    color: #333;
  }
  40% {
    color: #ccc;
  }
  100% {
    color: #ccc;
  }
}
@-webkit-keyframes throbber {
  0% {
    color: #333;
  }
  40% {
    color: #ccc;
  }
  100% {
    color: #ccc;
  }
}
@keyframes throbber {
  0% {
    color: #333;
  }
  40% {
    color: #ccc;
  }
  100% {
    color: #ccc;
  }
}
.preparing_loader .throb-group .fa-square {
  display: inline-block;
  -moz-animation: throbber 1.8s infinite;
  -webkit-animation: throbber 1.8s infinite;
  animation: throbber 1.8s infinite;
  font-size: 14px;
  color: #ccc;
}
.preparing_loader .throb-group .fa-square:nth-child(1) {
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.preparing_loader .throb-group .fa-square:nth-child(2) {
  -moz-animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.preparing_loader .throb-group .fa-square:nth-child(3) {
  -moz-animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.preparing_loader .throb-group .fa-square:nth-child(4) {
  -moz-animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}
.preparing_loader .throb-group .fa-square:nth-child(5) {
  -moz-animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
.preparing_loader .throb-group .fa-square:nth-child(6) {
  -moz-animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.preparing_loader .throb-group {
  margin: 10px auto;
  width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<div class="preparing_loader text-center">
        
          <div class="throb-group">
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
        </div>
      </div>

How can I override fa fa-sqaure to rectangle. I just want to change the square with rectangle.

Any help would be great.

Thank You.

Upvotes: 1

Views: 82

Answers (2)

Bogdan Efimenko
Bogdan Efimenko

Reputation: 151

You may create divs with rectangle view instead "i" and change in animation background-color instead color.

.rectangle {
  display: inline-block;
  width: 20px;
  height: 10px;
  background-color: #ccc;
}

@keyframes throbber {
  0% {
    background-color: #333;
  }
  40% {
    background-color: #ccc;
  }
  100% {
    background-color: #ccc;
  }
}
.rectangle {
  display: inline-block;
  -moz-animation: throbber 1.8s infinite;
  -webkit-animation: throbber 1.8s infinite;
  animation: throbber 1.8s infinite;
  font-size: 14px;
  color: #ccc;
}
.rectangle:nth-child(1) {
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.rectangle:nth-child(2) {
  -moz-animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.rectangle:nth-child(3) {
  -moz-animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.rectangle:nth-child(4) {
  -moz-animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}
.rectangle:nth-child(5) {
  -moz-animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
.rectangle:nth-child(6) {
  -moz-animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.preparing_loader .throb-group {
  margin: 10px auto;
  width: 100%;
}
<div class="preparing_loader text-center">
        
          <div class="throb-group">
            <i class="rectangle"></i>
            <i class="rectangle"></i>
            <i class="rectangle"></i>
            <i class="rectangle"></i>
            <i class="rectangle"></i>
            <i class="rectangle"></i>
        </div>
      </div>

Upvotes: 1

msanford
msanford

Reputation: 12227

Use a transform to scale the existing Font Awesome icon, and then adjust its width to prevent neighbours overlapping:

i {
  transform: scale(1.5, 1);
  width: 20px;
}

Working sample:

@-moz-keyframes throbber {
  0% {
    color: #333;
  }
  40% {
    color: #ccc;
  }
  100% {
    color: #ccc;
  }
}
@-webkit-keyframes throbber {
  0% {
    color: #333;
  }
  40% {
    color: #ccc;
  }
  100% {
    color: #ccc;
  }
}
@keyframes throbber {
  0% {
    color: #333;
  }
  40% {
    color: #ccc;
  }
  100% {
    color: #ccc;
  }
}
.preparing_loader .throb-group .fa-square {
  display: inline-block;
  -moz-animation: throbber 1.8s infinite;
  -webkit-animation: throbber 1.8s infinite;
  animation: throbber 1.8s infinite;
  font-size: 14px;
  color: #ccc;
}
.preparing_loader .throb-group .fa-square:nth-child(1) {
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.preparing_loader .throb-group .fa-square:nth-child(2) {
  -moz-animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.preparing_loader .throb-group .fa-square:nth-child(3) {
  -moz-animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.preparing_loader .throb-group .fa-square:nth-child(4) {
  -moz-animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}
.preparing_loader .throb-group .fa-square:nth-child(5) {
  -moz-animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
.preparing_loader .throb-group .fa-square:nth-child(6) {
  -moz-animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.preparing_loader .throb-group {
  margin: 10px auto;
  width: 100%;
}

i {
  transform: scale(1.5, 1);
  width: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<div class="preparing_loader text-center">
        
          <div class="throb-group">
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
            <i class="fa fa-square"></i>
        </div>
      </div>

Upvotes: 0

Related Questions