Tojo ~san, I'm Hungry >w<♥ (Pizza Loading CSS)
HTML
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Toujou ~san, I'm Hungry >w<!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>By Tiesna Sulistiana</p>
<div class='pizza'>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
</div>
<b>Loading...</b>
</body>
</html>
CSS
body {
height: 100vh;
width: 100vw;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0;
overflow: hidden;
background: -webkit-radial-gradient(center, circle, #cc333f, #7a1f26);
background: radial-gradient(circle at center, #524468, #524468);
background-image: url(http://img14.deviantart.net/ec66/i/2014/270/b/4/_wallpaper__lovelive____nozomi_tojo_by_ekumimi-d80qrv9.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #f0e6f0;
}
body:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 15vmin;
height: 2vmin;
background: #8f242c;
margin-top: 17.5vmin;
-webkit-filter: blur(10px);
filter: blur(10px);
border-radius: 100%;
}
body p {
position: absolute;
bottom: 10px;
left: 10px;
color: #000;
font-size: 10px;
}
body b {
position: absolute;
top: 315px;
center: 10px;
color: #5F3884;
font-size: 24px;
}
body .pizza {
height: 20vmin;
width: 20vmin;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: none;
position: relative;
-webkit-animation: rotate 13s linear infinite;
animation: rotate 13s linear infinite;
}
@-webkit-keyframes rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
body .pizza .slice {
z-index: -1;
overflow: visible;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 10vmin 2.75vmin 0 2.75vmin;
border-color: #ffdc73 transparent transparent transparent;
left: 7.5vmin;
top: 0;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation: loading 1.8125s ease-in-out infinite;
animation: loading 1.8125s ease-in-out infinite;
}
@-webkit-keyframes loading {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes loading {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
body .pizza .slice:nth-of-type(2n):after {
box-shadow: 0.5vmin 2.5vmin 0 #cc333f;
}
body .pizza .slice:nth-of-type(4n):after {
box-shadow: 0.5vmin 2.5vmin 0 #cc333f, 1.5vmin 5vmin 0 #cc333f;
}
body .pizza .slice:nth-of-type(1) {
-webkit-transform: rotate(-27.75deg);
transform: rotate(-27.75deg);
-webkit-animation-delay: -0.0625s;
animation-delay: -0.0625s;
}
body .pizza .slice:nth-of-type(2) {
-webkit-transform: rotate(-55.5deg);
transform: rotate(-55.5deg);
-webkit-animation-delay: -0.125s;
animation-delay: -0.125s;
}
body .pizza .slice:nth-of-type(3) {
-webkit-transform: rotate(-83.25deg);
transform: rotate(-83.25deg);
-webkit-animation-delay: -0.1875s;
animation-delay: -0.1875s;
}
body .pizza .slice:nth-of-type(4) {
-webkit-transform: rotate(-111deg);
transform: rotate(-111deg);
-webkit-animation-delay: -0.25s;
animation-delay: -0.25s;
}
body .pizza .slice:nth-of-type(5) {
-webkit-transform: rotate(-138.75deg);
transform: rotate(-138.75deg);
-webkit-animation-delay: -0.3125s;
animation-delay: -0.3125s;
}
body .pizza .slice:nth-of-type(6) {
-webkit-transform: rotate(-166.5deg);
transform: rotate(-166.5deg);
-webkit-animation-delay: -0.375s;
animation-delay: -0.375s;
}
body .pizza .slice:nth-of-type(7) {
-webkit-transform: rotate(-194.25deg);
transform: rotate(-194.25deg);
-webkit-animation-delay: -0.4375s;
animation-delay: -0.4375s;
}
body .pizza .slice:nth-of-type(8) {
-webkit-transform: rotate(-222deg);
transform: rotate(-222deg);
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
body .pizza .slice:nth-of-type(9) {
-webkit-transform: rotate(-249.75deg);
transform: rotate(-249.75deg);
-webkit-animation-delay: -0.5625s;
animation-delay: -0.5625s;
}
body .pizza .slice:nth-of-type(10) {
-webkit-transform: rotate(-277.5deg);
transform: rotate(-277.5deg);
-webkit-animation-delay: -0.625s;
animation-delay: -0.625s;
}
body .pizza .slice:nth-of-type(11) {
-webkit-transform: rotate(-305.25deg);
transform: rotate(-305.25deg);
-webkit-animation-delay: -0.6875s;
animation-delay: -0.6875s;
}
body .pizza .slice:nth-of-type(12) {
-webkit-transform: rotate(-333deg);
transform: rotate(-333deg);
-webkit-animation-delay: -0.75s;
animation-delay: -0.75s;
}
body .pizza .slice:before {
content: '';
position: absolute;
height: 1.5vmin;
width: 6vmin;
background: #bbb083;
top: -10.5vmin;
left: -3vmin;
border-radius: 100vmin 100vmin 0.5vmin 0.5vmin / 50vmin 50vmin;
}
body .pizza .slice:after {
content: '';
border-radius: 100%;
position: absolute;
width: 1.25vmin;
height: 1.25vmin;
background: #524468;
left: -1vmin;
top: -7vmin;
z-index: 2;
}
