たった1行でローディングアニメーションが実装できるCSSジェネレーター

HTML1行だけで、様々なローディングアニメーションを実装できるCSSジェネレーターを紹介します。
CSS Loaders

よくありそうなシンプルなものから、CSSだけで表現されているとは思えない複雑なものまで、バラエティ豊かに用意されています。

使い方はとても簡単。
HTMLはたった1行です。

<div class="loader"></div>

 
cssは対象をクリックしてコピペするだけ。

中身はこんな感じ。

.loader {
  width: 50px;
  --b: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #514b82;
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg,#000 1deg 70deg,#0000 71deg 90deg),
    radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
  animation: l5 1s infinite;
}
@keyframes l5 {to{transform: rotate(.5turn)}}

 
CSSなので、色を変えるのも簡単です。

HTMLのタグ1つだけで100種類のツールチップを実装できるCSSジェネレーター

タグ1つだけでcssをコピペするだけで、100種類のツールチップを実装できるジェネレーターを紹介します。
CSS Generators: Tooltips & Speech Bubbles

シンプルなものからポップなものまで、しっぽの形や位置が違う100種類が用意されています。


使い方はとても簡単。
HTMLはたった1つのタグを記述するだけです。

<div class="tooltip">Your text content</div>

 
cssはツールチップをクリックしてコピペするだけ。

中身はこんな感じ。

.tooltip {
    color: #fff;
    font-size: 18px;
    max-width: 28ch;
    text-align: center;
}
.tooltip {
    /* triangle dimension */
    --b: 2em; /* base */
    --h: 1em; /* height */
    --p: 50%; /* triangle position (0%:left 100%:right) */
    padding: 1em;
    clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
      min(100%,var(--p) + var(--b)/2) 100%,
      var(--p) calc(100% + var(--h)),
      max(0%  ,var(--p) - var(--b)/2) 100%);
    border-image: fill 0//var(--h)
      conic-gradient(#CC333F 0 0); /* the color */
}

 
上にあるスライダーを移動すると、好きな位置にしっぽを配置できます。

とても簡単ですので、活用してみてはいかがでしょうか。