パーツ番号 08-03-05 ・ JavaScript使用

チェックマーク成功アニメ

クリックで円が描かれ、続いてチェックが跳ねて現れます。WordPressのフォーム送信完了や設定保存の合図に最適です。

clickjsinput

プレビュー

ソースコード

HTML

<button class="d08-03-05-btn" type="button">
          <svg viewBox="0 0 52 52" width="60" height="60">
            <circle class="d08-03-05-c" cx="26" cy="26" r="23" fill="none"/>
            <path class="d08-03-05-check" fill="none" d="M15 27l7 7 15-16"/>
          </svg>
        </button>

CSS

.d08-03-05-btn{background:none;border:none;cursor:pointer;padding:0}
        .d08-03-05-c{stroke:#22c55e;stroke-width:3;stroke-dasharray:145;stroke-dashoffset:145}
        .d08-03-05-check{stroke:#22c55e;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40}
        .d08-03-05-btn.is-ok .d08-03-05-c{animation:d08-03-05-draw .5s ease forwards}
        .d08-03-05-btn.is-ok .d08-03-05-check{animation:d08-03-05-tick .4s .4s cubic-bezier(.2,1.5,.4,1) forwards}
        @keyframes d08-03-05-draw{to{stroke-dashoffset:0}}
        @keyframes d08-03-05-tick{0%{stroke-dashoffset:40}70%{stroke-dashoffset:-4}100%{stroke-dashoffset:0}}

JavaScript

(function(){
        var btn=document.querySelector('#item-08-03-05 .d08-03-05-btn');if(!btn)return;
        btn.addEventListener('click',function(){
          btn.classList.remove('is-ok');void btn.offsetWidth;btn.classList.add('is-ok');
        });
      })();

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