loading icon 4

Open In Editor Publish Your Code

* {
 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;
}

loading icon 4

Recommended

CSS Loading Animation HTML Structure

pulse loading

CSS Loading Animation Snippet

HTML

CSS

JS

Recommended

CSS Loading Animation HTML Structure

pulse loading

CSS Loading Animation Snippet

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS