Home Rings loader Create With HTML And CSS Animation For Responsive Webs...
HTML And CSS Cooding
September 02, 2022
HTML SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="b.css">
</head>
<body>
<div class="loader" style="--bg: hsl(264.3739957767577, 100%, 85%)">
<div class="dot" style="--index: 0"></div>
<div class="dot" style="--index: 1"></div>
<div class="dot" style="--index: 2"></div>
<div class="dot" style="--index: 3"></div>
<div class="dot" style="--index: 4"></div>
<div class="dot" style="--index: 5"></div>
<div class="dot" style="--index: 6"></div>
<div class="dot" style="--index: 7"></div>
</div>
</body>
</html>
CSS SOURCE CODE
* {box-sizing: border-box;}
body {
align-items: center;
background-color: black;
display: flex;
justify-content: center;
min-height: 100vh;
overflow-x: hidden;}
:root {
--dot-size: 5;
--speed: 1.5;
--radius: 10;
--center-size: 5;
--rotation: -25;
--ring-radius: 8;
--ring-thickness: 0.75;
--bg: #ffbfb3;}
.loader {
position: relative;
height: calc(var(--dot-size) * var(--center-size) * 1px);
width: calc(var(--dot-size) * var(--center-size) * 1px);
-webkit-animation: turn calc(var(--speed) * 20s) calc(var(--speed) * -2s) infinite linear;
animation: turn calc(var(--speed) * 20s) calc(var(--speed) * -2s) infinite linear;}
.loader:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
background: var(--bg);
height: 100%;
width: 100%;
transform: translate(-50%, -50%);
border-radius: 100%;
animation: pulse calc(var(--speed) * 1s) infinite alternate-reverse;}
.dot {
height: calc(var(--dot-size) * 1px);
width: calc(var(--dot-size) * 1px);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(calc((360 / 8) * var(--index) * 1deg)) translate(0, calc(var(--dot-size) * var(--radius) * 1px));}
.dot:after,
.dot:before {
content: '';
border-radius: 100%;
box-sizing: border-box;
position: absolute;
background: red;
top: 50%;
left: 50%;
-webkit-animation-duration: calc(var(--speed) * 1s);
animation-duration: calc(var(--speed) * 1s);
-webkit-animation-delay: calc((8 - var(--index)) * (var(--speed) / 8) * -1s);
animation-delay: calc((8 - var(--index)) * (var(--speed) / 8) * -1s);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
transform: translate(-50%, -50%) scale(var(--scale));}
.dot:after {
--dot-size: 5;
--ring-thickness: 0.75;
--ring-radius: 8;
--scale: 0;
-webkit-animation-name: load;
animation-name: load;
border: calc(var(--dot-size) * var(--ring-thickness) * 1px) solid var(--bg);
height: calc(var(--dot-size) * var(--ring-radius) * 1px);
width: calc(var(--dot-size) * var(--ring-radius) * 1px);}
.dot:before {
--scale: 1;
-webkit-animation-name: fade;
animation-name: fade;
background: var(--bg);
height: 100%;
width: 100%;}
@-webkit-keyframes fade {
0% {opacity: 1;}
85%, 100% {opacity: 0.2;}}
@keyframes fade {
0% {opacity: 1;}
85%, 100% {opacity: 0.2;}}
@-webkit-keyframes load {
0% {transform: translate(-50%, -50%) scale(0);}
85%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0;}}
@keyframes load {
0% {transform: translate(-50%, -50%) scale(0);}
85%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0;}}
@-webkit-keyframes pulse {
to {opacity: 0.35;}}
@keyframes pulse {
to {opacity: 0.35;}}
@-webkit-keyframes turn {
to {transform: rotate(-360deg);}}
@keyframes turn {
to {transform: rotate(-360deg);}}
