Breaking News: Grepper is joining
You.com.
Read the official announcement!
Check it out
SEARCH
COMMUNITY
API
DOCS
INSTALL GREPPER
Log In
Signup
Mizanur Rahaman
Apr 28, 2022
Twitter
Facebook
Reddit
Hacker News
LinkedIn
javascript loading animation on button click
<button class="action-btn" id="login-btn">Login</button>Login
.action-btn { background-color: #FF7F00; border: none; font-size: 20px; font-weight: 600; text-transform: uppercase; padding: 0.5em 1.25em; color: white; border-radius: 0.15em; transition: 0.3s; cursor: pointer; position: relative; display: block; } .action-btn:hover { background-color: #ff6600; } .action-btn:focus { outline: 0.05em dashed #ff6600; outline-offset: 0.05em; } .action-btn::after { content: ''; display: block; width: 1.2em; height: 1.2em; position: absolute; left: calc(50% - 0.75em); top: calc(50% - 0.75em); border: 0.15em solid transparent; border-right-color: white; border-radius: 50%; animation: button-anim 0.7s linear infinite; opacity: 0; } @keyframes button-anim { from { transform: rotate(0); } to { transform: rotate(360deg); } } .action-btn.loading { color: transparent; } .action-btn.loading::after { opacity: 1; } /* em values are used to adjust button values such as padding, radius etc. based on font-size */.action-btn { background-color: #FF7F00; border: none; font-size: 20px; font-weight: 600; text-transform: uppercase; padding: 0.5em 1.25em; color: white; border-radius: 0.15em; transition: 0.3s; cursor: pointer; position: relative; display: block; } .action-btn:hover { background-color: #ff6600; } .action-btn:focus { outline: 0.05em dashed #ff6600; outline-offset: 0.05em; } .action-btn::after { content: ''; display: block; width: 1.2em; height: 1.2em; position: absolute; left: calc(50% - 0.75em); top: calc(50% - 0.75em); border: 0.15em solid transparent; border-right-color: white; border-radius: 50%; animation: button-anim 0.7s linear infinite; opacity: 0; } @keyframes button-anim { from { transform: rotate(0); } to { transform: rotate(360deg); } } .action-btn.loading { color: transparent; } .action-btn.loading::after { opacity: 1; } /* em values are used to adjust button values such as padding, radius etc. based on font-size */
const loginBtn = document.getElementById("login-btn"); loginBtn.addEventListener('click', () => { // Show loader on button click loginBtn.classList.add("loading"); // Hide loader after success/failure - here it will hide after 2seconds setTimeout(() => loginBtn.classList.remove("loading"), 3000); });const loginBtn = document.getElementById("login-btn"); loginBtn.addEventListener('click', () => { // Show loader on button click loginBtn.classList.add("loading"); // Hide loader after success/failure - here it will hide after 2seconds setTimeout(() => loginBtn.classList.remove("loading"), 3000); });