ブックマークしておくと便利！ CSSで実装されたローダー、簡単にカスタマイズもできる優れもの -Loadership

サイト構築 -CSS

Post on:2024年1月29日

Loadershipの特徴

Loadershipは、CSSで実装されたローダーをコピペで簡単に利用できるオンラインツールです。ローダーはオンラインでカスタマイズもでき、自分のデザインに合ったローダーを作成できます。

ローダーのCSSは依存関係はなく、HTMLとCSSをコピペするだけで利用できます。MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。詳しくは、Aboutをご覧ください。

Loadership

CSSのローダーは、スピナーやプログレスバーなど、さまざまなスタイルが用意されています。カスタマイズでは、カラーやサイズをはじめ、バーやドットのサイズ、アニメーションの種類やスピードなどが変更できます。

Loadershipの特徴

Loadershipの使い方

Loadershipの使い方は簡単、登録など面倒なことは一切不要です。まずは、サイトにアクセスします。

Loadership

好みのローダーを選択すると、カスタマイズページへ遷移します。

Stripe Circular Classic

ローダーを利用するには、HTMLとCSSをコピペするだけです。

HTMLは、こんな感じです。

<div class="loadership_PIPKV">
  <div></div>
  <div></div>
</div>

</div>

CSSは、こんな感じ。

.loadership_PIPKV {
  display: flex;
  position: relative;
  width: 70px;
  height: 70px;
}
.loadership_PIPKV div {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 70px;
  height: 70px;
  border: 10px solid #ffffff33;
  border-radius: 50%;
}
.loadership_PIPKV div:nth-child(2) {
  clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 20%);
  animation: loadership_PIPKV_spin 1.2s infinite;
  animation-timing-function: linear;
  border: 10px solid #ffffff;
}
@keyframes loadership_PIPKV_spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}