パーツ番号 07-15-06 ・ CSSのみ

視聴済み進捗バー付きサムネイル

下端の赤いバーで視聴済み割合を示すサムネイルです。会員限定動画コンテンツの続きから再生を訴求するUIに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="thumb">
          <span class="playbtn"><span class="tri"></span></span>
          <div class="progress"><i style="width:64%"></i></div>
        </div>

CSS

.d07-15-06 .thumb{position:relative;width:240px;height:135px;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#8a6bd9,#4a2f8f);}
        .d07-15-06 .playbtn{position:absolute;top:47%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;}
        .d07-15-06 .tri{width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:15px solid #3c2570;margin-left:4px;}
        .d07-15-06 .progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.35);}
        .d07-15-06 .progress i{display:block;height:100%;background:#e0393e;}

クラス名 .d07-15-06 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。