Juragan Coding - Hay Teman-teman kali ini saya akan membagikan tutorial Cara Membuat Loading Windows 8 Dengan CSS3,,efek ini bisa teman-teman terapkan untuk mempercantik website atau blog teman-teman salahsatu nya dengan menambah efek preloder dengan loading windows 8 salah satu website yang menggunakan efek ini adalah IDhostinger,,,coba teman-teman daftar dan masuk ke Cpanel idhostinger pasti teman-teman akan menjumpai efek ini
langsung saja silahkan teman-teman buat terlebih dahulu skrip HTML nya
<!DOCTYPE html>
<html>
<head>
<title>tutorial</title>
</head>
<body>
<!-- mulai -->
<!-- end -->
</body>
</html><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>Nah setelah Class nya di buat sekarang tinggal Css guys silahkan copas skrip 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;
}
}
