Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create Loading Buttons with CSS
Buttons can be displayed as loading when they are clicked. On click, the button may reach the next page but just before that, the loading stage is visible. On your web page, you can easily display the loading buttons with HTML and CSS. First, load the icons.
Set the CDN for the icons
To add the icons on our web page, we have used the Font Awesome Icons. Include it on a web page using the <link> element −
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Create the buttons
The buttons are created using the <button> element. The three different loading icons are set within the <i> element −
fa-spinner fa-spin fa-circle-o-notch fa-spin fa-refresh fa-spin
Here is the code to place the icons on the buttons −
<button><i class="fa fa-spinner fa-spin"></i>Loading</button> <button><i class="fa fa-circle-o-notch fa-spin"></i>Loading</button> <button><i class="fa fa-refresh fa-spin"></i>Loading</button>
Style the buttons
The buttons are styled like this −
button {
background-color: rgb(60, 24, 126);
border: none;
outline: none;
color: white;
padding: 12px 24px;
font-size: 26px;
}
Style the icons
The loading circular icons are placed correctly using the margin-left and margin-right properties −
i {
margin-left: -12px;
margin-right: 8px;
}
Example
The following is the code to create loading buttons with CSS −
<!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: rgb(60, 24, 126);
border: none;
outline: none;
color: white;
padding: 12px 24px;
font-size: 26px;
}
h1{
font-size: 50px;
font-family: monospace,sans-serif,serif;
}
i {
margin-left: -12px;
margin-right: 8px;
}
</style>
</head>
<body>
<h1>Loading Buttons Example</h1>
<button><i class="fa fa-spinner fa-spin"></i>Loading</button>
<button><i class="fa fa-circle-o-notch fa-spin"></i>Loading</button>
<button><i class="fa fa-refresh fa-spin"></i>Loading</button>
</body>
</html>
389 Views
