loading concept 2-1

by sungsoonz

HTML

<svg width="74" height="73" viewBox="0 0 74 73" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      path {
        opacity: 0;
      }

      #first {
        animation: fade 2s ease-in .2s infinite;
      }

      #second {
        animation: fade 2s ease-in .4s infinite;
      }

      #third {
        animation: fade 2s ease-in .6s infinite;
      }

      #fourth {
        animation: fade 2s ease-in .8s infinite;
      }

      @keyframes fade {
        0% {
          opacity: 0;
        }

        50% {
          opacity: 1;
        }

        100% {
          opacity: 0;
        }
      }

    </style>
  </defs>
<path id="first" d="M33.5339 0.825684H4.62939V37.9886L33.5339 0.825684Z" fill="#C9D1D8"/>
<path id="second" d="M74.0002 0.825684H45.0957V37.9886L74.0002 0.825684Z" fill="#C9D1D8"/>
<path id="third" d="M0.499802 72.6738L29.4043 72.6738L29.4043 35.5109L0.499802 72.6738Z" fill="#C9D1D8"/>
<path id="fourth" d="M42.618 72.6738L71.5225 72.6738L71.5225 35.5109L42.618 72.6738Z" fill="#C9D1D8"/>
</svg>

CSS

body {
  background: #F7F9FB;
}
svg {
  display: block;
  margin: 8rem auto;
}