2018年12月22日(土)

検索アイコンからローディングにアニメーション遷移

• 0
• 0
• 2
• 19

Result

See the Pen Search loading by kachibito (@kachibito) on CodePen.

検索アイコンから時計アイコン（ローディング）に遷移する、みたいなやつです
JSというよりCSSがメインになってますが・・

jQuery

$('.search').on('click touch', function(e) { var self = $(this); self.addClass('loading');//アイコンをクリックしたらladingクラスを付与 setTimeout(function() { self.removeClass('loading');//本サンプルでは便宜上時間で動作停止 }, 3000) });

css

.search { width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; position: relative; margin: 1px 3px 3px 1px; cursor: pointer; ...