loading icon 4

Open In Editor Publish Your Code Need a Website?

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

Social icons with reflections

Error 404 Page HTML Template

CSS Social Icons

HTML

CSS

JS

Recommended

Social icons with reflections

Error 404 Page HTML Template

CSS Social Icons

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS