Skip to content

Instantly share code, notes, and snippets.

@uhidontkno

uhidontkno/index.html

Created October 22, 2023 13:07
Show Gist options
  • Save uhidontkno/ebd508254dd2ba03d4c6678ce2bfd85e to your computer and use it in GitHub Desktop.
Save uhidontkno/ebd508254dd2ba03d4c6678ce2bfd85e to your computer and use it in GitHub Desktop.
Download ZIP
Windows Loading Animation
Raw
index.html
<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>Loading Animation</title>
</head>
<body>
<div class=".container">
<div class="support">
<div class="dot"></div>
</div>
<div class="support">
<div class="dot"></div>
</div>
<div class="support">
<div class="dot"></div>
</div>
<div class="support">
<div class="dot"></div>
</div>
<div class="support">
<div class="dot"></div>
</div>
<div class="support">
<div class="dot"></div>
</div>
<p class="txt">Please wait</p>
</div>
</body>
</html>
Raw
style.css
:root{
--main-clr: rgb(0, 127, 255);
--font-clr: rgba(255, 255, 255, 1);
}
body{
background: var(--main-clr);
display: grid;
place-items: center;
height: 100vh;
}
.txt{
position: relative;
top: 2.6rem;
left: -1.4rem;
font-family: sans-serif;
color: var(--font-clr);
}
.support{
width: 2rem;
height: 2rem;
position: absolute;
animation: rotation 3.8s linear infinite;
}
.support:nth-child(1){
animation-delay: 0.15s;
}
.support:nth-child(2){
animation-delay: 0.3s;
}
.support:nth-child(3){
animation-delay: 0.45s;
}
.support:nth-child(4){
animation-delay: 0.6s;
}
.support:nth-child(5){
animation-delay: 0.75s;
}
.support:nth-child(6){
animation-delay: 0.9s;
}
@keyframes rotation {
0%{
opacity: 0.8;
}
30%{
transform: rotate(180deg);
opacity: 1;
}
40%{
transform: rotate(360deg);
opacity: 1;
}
80%{
transform: rotate(720deg);
opacity: 0.8;
}
81%{
opacity: 0;
}
100%{
transform: rotate(0deg);
opacity: 0;
}
}
.dot{
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--font-clr);
position: relative;
top: 37px;
left: 7px;
}
Raw
windows-loading-animation.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment