Skip to content

Instantly share code, notes, and snippets.

@melanyss

melanyss/loader.html

Forked from Techgokul/loader.html
Created May 19, 2020 12:51
Show Gist options
  • Save melanyss/3fe70a3ddbc8347f8883f230e15b3e0c to your computer and use it in GitHub Desktop.
Save melanyss/3fe70a3ddbc8347f8883f230e15b3e0c to your computer and use it in GitHub Desktop.
Download ZIP
create a loader for your website using css and html
Raw
loader.html
<html>
<head>
<title>Loader</title>
<meta name="viewport" content="width=device-width initial-scale=1">
<style>
.loader{
margin-left: 400px;
margin-top: 250px;
border: 16px solid #0058ff;
border-bottom: 16px solid #0058ff;
border-top: 16px solid white;
border-radius: 50%;
background-color: white;
width: 500px;
height: 500px;
-webkit-animation: spin 2s linear;
-webkit-animation-iteration-count: infinite;
animation: spin 2s linear;
animation-iteration-count: infinite;
animation-delay: 2s;
}
.para{
font-size: 20px;
font-family: cursive;
color: chocolate;
text-align: center;
width: 500px;
height: 50px;
margin-left: 400px;
}
@-webkit-keyframes spin{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
@keyframes spin{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
</style>
</head>
<body>
<div class="para" id="p">Please Wait For sometime</div>
<div class="loader" id="load" style="display: block"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment