लोडिंग आइकन 4

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

11 October 2025

हृदय और कणों के साथ एनिमेटेड 404 त्रुटि पृष्ठ

HTML

CSS

* {
 margin: 0;
 padding: 0;
}
body {
 background: white;
 width: 100vw;
 height: 100vh;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}
/*container */
.container {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
}
/*circulo da cor do body no meio com z-index(profundidade) na frente */
.circulo {
 width: 25px;
 height: 25px;
 border-radius: 50%;
 background: white;
 position: absolute;
 z-index:2;
}
/*irmaos do circulo */
.filhos {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
}
/* palitos com transform orign center e atras do circulo branco */
.filhos div {
 position: absolute;
 width: 20px;
 height: 3px;
 background: black;
 transform-origin: left center;
 left: 50%;
}
/*rotate especifico para cada palito baseado na divisao 360/8 */
.filhos div:nth-child(1) {
 transform: rotate(45deg);
}
.filhos div:nth-child(2) {
 transform: rotate(90deg);
}
.filhos div:nth-child(3) {
 transform: rotate(135deg);
}
.filhos div:nth-child(4) {
 transform: rotate(180deg);
}
.filhos div:nth-child(5) {
 transform: rotate(225deg);
}
.filhos div:nth-child(6) {
 transform: rotate(270deg);
}
.filhos div:nth-child(7) {
 transform: rotate(315deg);
}
.filhos div:nth-child(8) {
 transform: rotate(360deg);
}
/*animacao */
@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}
.filhos {
 animation: spin 2s linear infinite;
}

लोडिंग आइकन 4

अनुशंसित

CSS लोडिंग एनीमेशन स्निपेट

CSS लोडिंग एनीमेशन उदाहरण

हृदय और कणों के साथ एनिमेटेड 404 त्रुटि पृष्ठ

HTML

CSS

JS

अनुशंसित

CSS लोडिंग एनीमेशन स्निपेट

CSS लोडिंग एनीमेशन उदाहरण

हृदय और कणों के साथ एनिमेटेड 404 त्रुटि पृष्ठ

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS