Introduction
A loading button is a button that displays a loading spinner to indicate that an action is in progress, such as submitting a form or processing a request. This can greatly improve the user experience by providing feedback while the action is being completed. You can create a loading button using HTML and CSS by animating a spinner inside the button.
In this tutorial, you will learn how to create a loading button using CSS animations and basic HTML structure.
Problem Statement
Create a CSS code that:
- Displays a button.
- Shows a loading spinner inside the button when the button is clicked or in a loading state.
- Optionally adds a disabled state to the button while it's loading.
Example:
- Input: A button element with the text "Submit" that changes to a loading spinner when clicked.
- Output: A button with a loading spinner and a smooth animation effect.
Solution Steps
- Use the
<button>Element: Create a button in HTML. - Add the Loading Spinner with CSS: Use keyframes and
animationto create a spinner. - Toggle the Loading State: Style the button to show the spinner when it's in the loading state.
HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Button</title>
<style>
/* Step 1: Style the button */
.loading-button {
font-size: 1.2rem;
color: white;
background-color: #3498db;
padding: 12px 30px;
border: none;
border-radius: 5px;
cursor: pointer;
position: relative;
transition: background-color 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Step 2: Style the spinner */
.loading-button .spinner {
width: 20px;
height: 20px;
border: 3px solid white;
border-top-color: transparent;
border-radius: 50%;
position: absolute;
animation: spin 1s linear infinite;
display: none; /* Hidden by default */
}
/* Step 3: Show spinner in loading state */
.loading-button.loading .spinner {
display: block; /* Show spinner when loading */
}
/* Hide text when loading */
.loading-button.loading span {
visibility: hidden; /* Hide text while loading */
}
/* Spinner animation */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div style="text-align: center; margin-top: 100px;">
<button class="loading-button" id="submitBtn">
<div class="spinner"></div>
<span>Submit</span>
</button>
</div>
<script>
// JavaScript to toggle loading state
const submitBtn = document.getElementById('submitBtn');
submitBtn.addEventListener('click', function() {
// Toggle loading state
submitBtn.classList.add('loading');
// Simulate a delay (e.g., 3 seconds) for loading
setTimeout(function() {
submitBtn.classList.remove('loading');
}, 3000);
});
</script>
</body>
</html>
Output
Explanation
Step 1: Style the Button
The .loading-button class styles the button with basic properties like background color, padding, border-radius, and position.
.loading-button {
font-size: 1.2rem;
color: white;
background-color: #3498db;
padding: 12px 30px;
border: none;
border-radius: 5px;
cursor: pointer;
position: relative;
transition: background-color 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
position: relative: Allows the spinner to be positioned inside the button.display: inline-flex: Ensures that the text and spinner are aligned inside the button.
Step 2: Style the Spinner
The .spinner class styles the loading spinner inside the button. It uses border-radius to create a circular spinner and animation to make it rotate.
.spinner {
width: 20px;
height: 20px;
border: 3px solid white;
border-top-color: transparent;
border-radius: 50%;
position: absolute;
animation: spin 1s linear infinite;
display: none; /* Hidden by default */
}
border: 3px solid white: Creates a circular spinner with a solid border.border-top-color: transparent: Makes the top part of the spinner transparent to create the spinning effect.animation: spin 1s linear infinite: Rotates the spinner continuously.
Step 3: Add Loading State
When the button is clicked, the loading class is added, which reveals the spinner and hides the button text.
.loading-button.loading .spinner {
display: block;
}
.loading-button.loading span {
visibility: hidden; /* Hide text while loading */
}
.loading-button.loading .spinner { display: block; }: When the button is in the loading state, the spinner becomes visible..loading-button.loading span { visibility: hidden; }: The button text is hidden while the loading spinner is shown.
Step 4: Add Spinner Animation
The @keyframes rule is used to create the spinning effect for the loader.
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
transform: rotate(360deg): Rotates the spinner 360 degrees to create the spinning effect.
Step 5: Toggle Loading State with JavaScript
In the JavaScript section, the button's loading state is toggled when it is clicked. The setTimeout function simulates a loading process that lasts 3 seconds before removing the loading state.
submitBtn.addEventListener('click', function() {
submitBtn.classList.add('loading');
setTimeout(function() {
submitBtn.classList.remove('loading');
}, 3000);
});
Customization
Change Spinner Size
You can easily adjust the size of the spinner by modifying the width and height properties in the .spinner class:
.spinner {
width: 30px;
height: 30px;
border: 4px solid white;
border-top-color: transparent;
}
Change Spinner Color
You can change the spinner's color by adjusting the border-color property:
.spinner {
border: 3px solid #ffffff;
border-top-color: #3498db; /* Blue spinner */
}
Conclusion
Creating a loading button in HTML and CSS is simple with the help of CSS animations and the @keyframes rule. You can use a loading spinner inside the button to indicate that an action is in progress. With the help of JavaScript, you can easily toggle the loading state and simulate real-time functionality.
Comments
Post a Comment
Leave Comment