CSS

【CSS】Pure CSSで実装されたローディングアニメーションCSSloading

March 18, 2017
cssloading

CSSloadingはPure CSSで実装されたローディングアニメーション

HTML

<ul class="loadings">
      <li>
        <div class="cssloading-circle" style="width: 20px; height: 20px;"></div>
        <p>width: 20px; height: 20px</p>
      </li>
      <li>
        <div class="cssloading-circle" style="color: lightgreen"></div>
        <p>color: lightgreen</p>
      </li>
      <li style="background: #eee;">
        <div class="cssloading-circle" style="background: #eee"></div>
        <p>background: #eee</p>
      </li>
      <li>
        <div class="cssloading-circle" style="font-size: 1px"></div>
        <p>font-size: 1px</p>
      </li>
      <li>
        <div class="cssloading-circle" style="animation-duration: 2s"></div>
        <p>animation-duration: 2s</p>
      </li>
</ul>

MIT