 |
| Loading spinner animation using html and css |
In this article, we given a Loading spinner animation using html and css source code as a project. Loading spinner animation is used at the time of loading process. It is commonly used at the time processing task. We created a loading spinner animation using html and css with responsive design.
So, Must try this project for practice and use in vs code to check how it works. We have given a complete source code of Loading spinner animation using html and css. Let's go and check the source code as given below -
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Spinner-loading.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Then run the code or check the preview with code preview extension in vs code.
Loading spinner animation using html and css source code
Here we given a html and css source code of Loading spinner animation project as given -
HTML
In HTML, we created a div tag for loading spinner. Linked a css file for styling a loading spinner. Copy the given html code and paste it into index.html file.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Loading Spinner Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loader"> <div class="spinner"></div> </div> </body> </html>
CSS
In CSS, we styled a spinner by adding a position. we added a keyframe to rotate the spinner for loading spinner. Added a responsiveness for better experience on all screens. Copy the given css code and paste it into style.css file.
body,
html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
.loader {
width: 100px;
height: 100px;
position: relative;
}
.spinner {
width: 100%;
height: 100%;
position: absolute;
border: 5px solid rgba(0, 0, 0, 0.3);
border-top-color: #3498db;
border-radius: 50%;
animation: rotate 1s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@media (max-width: 600px) {
.loader {
width: 80px;
height: 80px;
}
.spinner {
border-width: 3px;
}
}
@media (max-width: 400px) {
.loader {
width: 60px;
height: 60px;
}
.spinner {
border-width: 2px;
}
}Output
Check this output of Loading spinner animation -
Also see this -
Hope this helps you to know about Loading spinner animation using html and css source code. If you have any confusion or query then you can contact us on our coding community.
Checkout others projects on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.
Tags:
projects