Home Rings loader Create With HTML And CSS Animation For Responsive Webs...

0 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);}}