Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create loading buttons with CSS?
Loading buttons provide visual feedback to users when they click a button that triggers a process like form submission or data loading. You can create loading buttons with CSS by combining Font Awesome icons with CSS animations to display spinning indicators.
Syntax
button {
/* Button styling */
background-color: color;
padding: value;
border: none;
}
.loading-icon {
/* Icon positioning and animation */
margin-right: value;
animation: spin duration linear infinite;
}
Setting Up Font Awesome Icons
To add spinning icons for loading buttons, include the Font Awesome CSS library using the CDN −
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Available Loading Icons
Font Awesome provides several spinning icon classes that work well for loading states −
| Icon Class | Description |
|---|---|
fa-spinner fa-spin |
Classic spinner wheel |
fa-circle-o-notch fa-spin |
Circle with notch |
fa-refresh fa-spin |
Refresh arrow icon |
Example: Loading Buttons with Different Icons
The following example creates three loading buttons with different spinning icons ?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
button {
background-color: #3c187e;
border: none;
outline: none;
color: white;
padding: 12px 24px;
font-size: 16px;
margin: 5px;
border-radius: 4px;
cursor: not-allowed;
}
i {
margin-right: 8px;
}
</style>
</head>
<body>
<h2>Loading Buttons Example</h2>
<button><i class="fa fa-spinner fa-spin"></i>Loading...</button>
<button><i class="fa fa-circle-o-notch fa-spin"></i>Processing...</button>
<button><i class="fa fa-refresh fa-spin"></i>Refreshing...</button>
</body>
</html>
Three purple loading buttons appear with different spinning icons: a spinner wheel, a circle with notch, and a refresh arrow. Each button shows loading text and the icons continuously rotate.
Example: Interactive Loading Button
This example shows how to toggle a button between normal and loading states using CSS classes ?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.btn {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #0056b3;
}
.btn.loading {
background-color: #6c757d;
cursor: not-allowed;
}
.loading-icon {
margin-right: 8px;
display: none;
}
.btn.loading .loading-icon {
display: inline-block;
}
</style>
</head>
<body>
<h2>Interactive Loading Button</h2>
<button class="btn" onclick="simulateLoading(this)">
<i class="fa fa-spinner fa-spin loading-icon"></i>
<span class="btn-text">Submit Form</span>
</button>
<script>
function simulateLoading(btn) {
btn.classList.add('loading');
btn.querySelector('.btn-text').textContent = 'Processing...';
setTimeout(() => {
btn.classList.remove('loading');
btn.querySelector('.btn-text').textContent = 'Submit Form';
}, 3000);
}
</script>
</body>
</html>
A blue "Submit Form" button that, when clicked, changes to gray with a spinning icon and "Processing..." text. After 3 seconds, it returns to the original state.
Conclusion
Loading buttons enhance user experience by providing visual feedback during processes. Use Font Awesome's spinning icons with proper CSS styling to create effective loading states that keep users informed about ongoing operations.
504 Views
