Free Photos
WordPress Themes

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; }
JAVASCRIPT
Expand for more options Login