Tutorial Cara Membuat Loader Windows 8 Dengan CSS3,langsung saja
buat kerangka html nya terlabih dahulu
<!DOCTYPE html> <html> <head> <title>tutorial</title> </head> <body> <!-- mulai --> <!-- end --> </body> </html>
selanjutnya simpan file CSS nya di atas </head> copy di bawah ini
body {
background: #111;
}
.loader {
position: relative;
padding-top: 100px;
width: 40px;
margin: auto;
}
.loader .circle {
position: absolute;
width: 38px;
height: 38px;
opacity: 0;
transform: rotate(225deg);
animation-iteration-count: infinite;
animation-name: orbit;
animation-duration: 5.5s;
}
.loader .circle:after {
content: '';
position: absolute;
width: 5px;
height: 5px;
border-radius: 5px;
background: #fff;
/* Pick a color */
}
.loader .circle:nth-child(2) {
animation-delay: 240ms;
}
.loader .circle:nth-child(3) {
animation-delay: 480ms;
}
.loader .circle:nth-child(4) {
animation-delay: 720ms;
}
.loader .circle:nth-child(5) {
animation-delay: 960ms;
}
@keyframes orbit {
0% {
transform: rotate(225deg);
opacity: 1;
animation-timing-function: ease-out;
}
7% {
transform: rotate(345deg);
animation-timing-function: linear;
}
30% {
transform: rotate(455deg);
animation-timing-function: ease-in-out;
}
39% {
transform: rotate(690deg);
animation-timing-function: linear;
}
70% {
transform: rotate(815deg);
opacity: 1;
animation-timing-function: ease-out;
}
75% {
transform: rotate(945deg);
animation-timing-function: ease-out;
}
76% {
transform: rotate(945deg);
opacity: 0;
}
100% {
transform: rotate(945deg);
opacity: 0;
}
}
setelah ini simpan class di bawah ini di anatara selesai dan end
dan jika sudah hasil nya akan seperti ini<div class='loader'><div class='circle'></div><div class='circle'></div><div class='circle'></div><div class='circle'></div><div class='circle'></div><div class='circle'></div></div>
