Preloader using HTML | CSS
What is Preloader ?
Preloader is a basic web component which is used to display whenever the web
page is loading. There are many types of preloader designs available, in
this blog we will build spinning type of preloader.
Please follow the below code and get started 💻.
HTML Code
<body>
<div class="container">
<span class="pre-loader"></span>
</div>
</body>CSS Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #000;
}
.container {
position: absolute;
}
.pre-loader {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
border: 8px solid rgba(255, 255, 255, 0.15);
border-top-color: #fff;
border-radius: 50%;
animation: load 1s linear infinite;
}
/* loading animation */
@keyframes load {
to {
transform: rotate(360deg);
}
}Output
Code by - AltafAlam Shaikh
Topic covered - animation, transform, border property in css.
Technologies used - HTML, CSS