Animated screen Loader Using html and css
Learn How to make a Animative screen Loader using html and css . latest page loader aminaton design with HTML and CSS. Web site Design Tutorial
Video Tutorial
Linear Gradients color(Jack Dorsey's stock) Click Here
How to use the code in stpe by step
- Open Your text Editor(like: VS code, SublimeText or Notepad++)
- Create a .html(like: index.html) file
- Copy the HTML code the code and past in the index.html file
- Then, Create a .css(like: style.css) file
- Copy the CSS code and past in style.css file
- Open the file in your browser
HTML CODE
HTML is a standard language for web page. With HTML you can create your own website. HTML is easy to learn - You will enjoy it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Grident Loader</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Animated Grident Loader</h2>
<div class="loader">
<span></span>
</div>
</body>
</html>
CSS CODE
The Full from of CSS is Cascading Style Sheets. It explains how to show HTML elemnts on display. For web designers, it is powerfull tool to adjust the design and control of the web pages t demonstrate how they should be viewed.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #010113;
}
h2{
color: #5f0a87;
margin-bottom: 2rem;
font-size: 4rem;
font-family: 'Courier New', Courier, monospace;
}
.loader{
position: relative;
overflow: hidden;
box-shadow: -5px -5px -5px rgba(255,255,255,0.1),
10px 10px 10px rgba(0, 0, 0, 0.4),
inset -5px -5px -5px rgba(255, 255, 255, 0.2),
inset 10px 10px 1px rgba(0, 0, 0, 0.4);
height: 200px;
width: 200px;
border-radius: 50%;
}
.loader::before{
position: absolute;
content: '';
z-index: 10;
opacity: 10;
top: 25px;
left: 25px;
right: 25px;
bottom: 25px;
background: #010113;
border-radius: 50%;
box-shadow: -5px -5px -5px rgba(255,255,255,0.1),
10px 10px 10px rgba(0, 0, 0, 0.4),
inset -5px -5px -5px rgba(255, 255, 255, 0.2),
inset 10px 10px 1px rgba(0, 0, 0, 0.4);
}
.loader span{
position: absolute;
width: 100%;
height: 100%;
filter: blur(20px);
border-radius: 50%;
background-color: #a4508b;
background-image: linear-gradient(326deg, #a4508b 0%, #5f0a87 74%);
animation: loader 0.6s linear infinite;
}
@keyframes loader {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
Posts
No comments: