// find elements var banner = $("#banner-message") var button = $("button") // handle click and add class button.on("click", function(){ banner.addClass("loading"); setTimeout(function(){ banner.removeClass('loading') }, ((Math.random() * 5000) + 2000) ) });
<div id="banner-message"> <p>Hello World</p> <button>Show Loading</button> </div>
body { background: #20262E; padding: 20px; font-family: Helvetica; } #banner-message { position: relative; background: #fff; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } #banner-message.loading::after { position: absolute; width: 48px; height: 48px; content: ''; left: 50%; top: 50%; transform: translate(-50%, -50%); border-left: solid 3px #fff; border-radius: 50%; animation: spin .5s linear infinite; } #banner-message.loading::before { position: absolute; width: 100%; height: 100%; background: rgba(10,10,10,.5); content: ''; left: 0; top: 0; }