CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to left, #525252 , #333);
}
.chrome-logo {
border-radius: 50%;
position: relative;
overflow: hidden;
height: 210px;
width: 210px;
z-index: 1;
animation: rotate 4s linear infinite;
}
.chrome-logo .center {
border-radius: 50%;
background: #0d6cac;
background: -webkit-gradient(linear, 50% 0%, 50% 100%,
color-stop(0%, #91c1e7),
color-stop(100%, #0d6cac));
background: linear-gradient(top center, #91c1e7, #0d6cac);
position: absolute;
top: 50%;
left: 50%;
height: 80px;
width: 80px;
margin-top: -41px;
margin-left: -40px;
border-bottom: solid 1px #125e90;
z-index: 10;
}
.chrome-logo .circle {
border-radius: 50%;
position: absolute;
background: white;
top: 50%;
left: 50%;
height: 94px;
width: 94px;
margin-top: -48px;
margin-left: -47px;
z-index: 5;
}
.chrome-logo .part-1 {
background: #e93c35;
position: absolute;
top: 0;
left: 34px;
width: 200px;
height: 58px;
}
.chrome-logo .part-1:after {
transform: rotate(60deg);
content: " ";
background: #e93c35;
position: absolute;
top: 0;
left: -91px;
width: 200px;
height: 58px;
}
.chrome-logo .part-2 {
transform: rotate(120deg);
background: #fdd901;
position: absolute;
top: 131px;
left: 56px;
width: 200px;
height: 65px;
}
.chrome-logo .part-2:after {
transform: rotate(60deg);
content: " ";
background: #fdd901;
position: absolute;
top: 0;
left: -91px;
width: 200px;
height: 58px;
}
.chrome-logo .part-3 {
transform: rotate(-120deg);
background: #5bc15b;
position: absolute;
top: 88px;
left: -74px;
width: 200px;
height: 65px;
}
.chrome-logo .part-3:after {
transform: rotate(60deg);
content: " ";
background: #5bc15b;
position: absolute;
top: 0;
left: -91px;
width: 200px;
height: 58px;
}
@keyframes rotate {
to { transform: rotate(360deg); }
}
