Loading CSS animation

index.jade

.main
  .header
    h1 Loading animation with CSS Keyframe
  .grid
    - var i = 0;
    while (i++ < 19)
      .item #{i}

loading-css-animation.markdown

Loading CSS animation

A Pen by Binh le on CodePen.

License.

script.js

$('.grid').masonry({
  itemSelector: '.item',
  columnWidth: 160,
  gutter: 10
});

$('.item').each(function(i){
  setTimeout(function(){
  $('.item').eq(i).addClass('isVisible');
  }, 200 * i);
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4.1/dist/masonry.pkgd.min.js"></script>

style.sass

body
  background: #98cbbc
  padding: 20px
  font-family: 'Raleway', sans-serif
  color: rgba(0,0,0,.5)

.main
  max-width: 980px
  margin: 50px auto
  display: block

.header
  padding: 10px
  text-align: center

.grid
  padding: 10px
  background: #ddd
  .item
    height: 60px
    margin-bottom: 10px
    display: inline-block
    border-radius: 4px
    box-sizing: border-box
    width: 160px
    background:
      position: center
      size: cover
    
    &:nth-child(1)
      background-image: url(https://d13yacurqjgara.cloudfront.net/users/52758/screenshots/2922421/virgin_islands_national_park_dribbble_j_fletcher.jpg)
    &:nth-child(2)
      background-image: url(https://d13yacurqjgara.cloudfront.net/users/40433/screenshots/2921609/untitled-4.png)
    &:nth-child(3)
      background-image: url(https://d13yacurqjgara.cloudfront.net/users/34991/screenshots/2921840/dribbble_stickermule.png)
    &:nth-child(4)
      background-image: url(https://d13yacurqjgara.cloudfront.net/users/40433/screenshots/2917699/untitled-1.png)
    &:nth-child(5)
      background-image: url(https://d13yacurqjgara.cloudfront.net/users/34991/screenshots/2920459/dribbble_pill.png)
    &:nth-child(6)
      background-image: url(https://d13yacurqjgara.cloudfront.net/users/40433/screenshots/2920159/untitled-1.png)
    &:nth-child(7)
      background-image: url(https://d13yacurqjgara.cloudfront.net/users/52758/screenshots/2919566/st_john_usvi_fish.jpg)
    &:nth-child(8)
      background-image: url(https://d13yacurqjgara.cloudfront.net/users/246575/screenshots/2919362/dribbble.jpg)
    &:nth-child(9)
      background-image: url(https://d13yacurqjgara.cloudfront.net/users/299/screenshots/2917854/fizzy-shades.png)
    &:nth-child(10)
      background-image: url(https://d13yacurqjgara.cloudfront.net/users/40433/screenshots/2917699/untitled-1.png)
    &:nth-child(11)
      background-image: url(https://d13yacurqjgara.cloudfront.net/users/1061/screenshots/2916828/mimita_2x.png)
    &:nth-child(12)
      background-image: url(https://d13yacurqjgara.cloudfront.net/users/34991/screenshots/2916809/dribbble_lemon.png)
    &:nth-child(13)
      background-image: url(https://d13yacurqjgara.cloudfront.net/users/40433/screenshots/2915526/untitled-1.png)
    &:nth-child(14)
      background-image: url(https://d13yacurqjgara.cloudfront.net/users/3460/screenshots/2915278/business-cards.png)
    &:nth-child(15)
      background-image: url(https://d13yacurqjgara.cloudfront.net/users/34991/screenshots/2915065/dribbble_soda.png)
    &:nth-child(16)
      background-image: url(https://d13yacurqjgara.cloudfront.net/users/60166/screenshots/2914950/bear.jpg)
    &:nth-child(17)
      background-image: url(https://d13yacurqjgara.cloudfront.net/users/34991/screenshots/2914297/dribbble_acorn.png)
    &:nth-child(18)
      background-image: url(https://d13yacurqjgara.cloudfront.net/users/34991/screenshots/2911678/dribbble_beerglass.png)
    &:nth-child(19)
      background-image: url(https://d13yacurqjgara.cloudfront.net/users/34991/screenshots/2910866/dribbble_whale.png)
    
    &:nth-child(4n-5)
      height: 50px
      
    &:nth-child(2n)
      height: 300px

    &:nth-child(3n)
      height: 120px
      

.item
  opacity: 0

.item.isVisible
  animation: fadein 600ms ease-in forwards
  
  
@keyframes fadein
  0%
    opacity: 0
  
  100%
    opacity: 1