CSS Preloader Mobil
Kali ini aku membuat animasi loader dengan isyarat HTML dan CSS. Hanya dengan HTML dan CSS kita sanggup membuat loading yang keren dan anda sanggup merombak sesuai cita-cita anda sehabis paham.
PERSIAPAN
Buatlah folder Preloader Mobil untuk menyimpan file index.html dan style.css
Siapkan text editor yang biasa anda gunakan.
MEMBUAT HALAMAN UTAMA
Tulislah isyarat html berikut dan simpan file dengan nama index.html
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/> <title>Mobil</title><br/> <link rel="stylesheet" type="text/css" href="css/style.css"><br/></head><br/><body><br/> <div class="loading-window"><br/> <div class="car"><br/> <div class="strike"></div><br/> <div class="strike strike2"></div><br/> <div class="strike strike3"></div><br/> <div class="strike strike4"></div><br/> <div class="strike strike5"></div><br/> <div class="car-detail spoiler"></div><br/> <div class="car-detail back"></div><br/> <div class="car-detail center"></div><br/> <div class="car-detail center1"></div><br/> <div class="car-detail front"></div><br/> <div class="car-detail wheel"></div><br/> <div class="car-detail wheel wheel2"></div><br/> </div><br/><br/> <div class="text"><br/> <span>Please Wait</span><span class = "dots">...</span><br/> </div><br/></div><br/></body><br/></html> |
Selanjutnya kita buat file gres dan tuliskan isyarat css berikut ini. Lalu buat folder css lalu simpan isyarat css ini di dalam folder css dengan nama style.css
|
1 |
@keyframes spin {<br/> 0% {<br/> transform: translate(2px, 1px) rotate(0deg);<br/> }<br/><br/> 10% {<br/> transform: translate(-1px, -3px) rotate(36deg);<br/> }<br/><br/> 20% {<br/> transform: translate(-2px, 0px) rotate(72deg);<br/> }<br/><br/> 30% {<br/> transform: translate(1px, 2px) rotate(108deg);<br/> }<br/><br/> 40% {<br/> transform: translate(1px, -1px) rotate(144deg);<br/> }<br/><br/> 50% {<br/> transform: translate(-1px, 3px) rotate(180deg);<br/> }<br/><br/> 60% {<br/> transform: translate(-1px, 1px) rotate(216deg);<br/> }<br/><br/> 70% {<br/> transform: translate(3px, 1px) rotate(252deg);<br/> }<br/><br/> 80% {<br/> transform: translate(-2px, -1px) rotate(288deg);<br/> }<br/><br/> 90% {<br/> transform: translate(2px, 1px) rotate(324deg);<br/> }<br/><br/> 100% {<br/> transform: translate(1px, -2px) rotate(360deg);<br/> }<br/>}<br/>@keyframes speed {<br/> 0% {<br/> transform: translate(2px, 1px) rotate(0deg);<br/> }<br/><br/> 10% {<br/> transform: translate(-1px, -3px) rotate(-1deg);<br/> }<br/><br/> 20% {<br/> transform: translate(-2px, 0px) rotate(1deg);<br/> }<br/><br/> 30% {<br/> transform: translate(1px, 2px) rotate(0deg);<br/> }<br/><br/> 40% {<br/> transform: translate(1px, -1px) rotate(1deg);<br/> }<br/><br/> 50% {<br/> transform: translate(-1px, 3px) rotate(-1deg);<br/> }<br/><br/> 60% {<br/> transform: translate(-1px, 1px) rotate(0deg);<br/> }<br/><br/> 70% {<br/> transform: translate(3px, 1px) rotate(-1deg);<br/> }<br/><br/> 80% {<br/> transform: translate(-2px, -1px) rotate(1deg);<br/> }<br/><br/> 90% {<br/> transform: translate(2px, 1px) rotate(0deg);<br/> }<br/><br/> 100% {<br/> transform: translate(1px, -2px) rotate(-1deg);<br/> }<br/>}<br/>@keyframes strikes {<br/> from {<br/> left: 25px;<br/> }<br/><br/> to {<br/> left: -80px;<br/> opacity: 0;<br/> }<br/>}<br/>@keyframes dots {<br/> from {<br/> width: 0px;<br/> }<br/><br/> to {<br/> width: 15px;<br/> }<br/>}<br/>@keyframes fadeIn {<br/> from {<br/> opacity: 0;<br/> }<br/><br/> to {<br/> opacity: 1;<br/> }<br/>}<br/>body {<br/> background: #ffffff;<br/> font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;<br/>}<br/><br/>.fadeIn, .loading-window {<br/> animation: fadeIn 0.4s both;<br/>}<br/><br/>.loading-window {<br/> background: #ffffff;<br/> border-radius: 6px;<br/> border: 3px solid #333;<br/> color: #333;<br/> height: 200px;<br/> left: 50%;<br/> margin-left: -150px;<br/> margin-top: -100px;<br/> position: fixed;<br/> top: 50%;<br/> width: 300px;<br/> z-index: 99;<br/>}<br/>.loading-window .text {<br/> font-size: 16px;<br/> position: absolute;<br/> width: auto;<br/> top: 75%;<br/> left: 38%;<br/> margin: 0 auto;<br/>}<br/>.loading-window .dots {<br/> display: inline-block;<br/> width: 5px;<br/> overflow: hidden;<br/> vertical-align: bottom;<br/> animation: dots 1.5s linear infinite;<br/> transition: 1;<br/>}<br/><br/>.car {<br/> position: absolute;<br/> width: 117px;<br/> height: 42px;<br/> left: 92px;<br/> top: 70px;<br/>}<br/>.car .strike {<br/> position: absolute;<br/> width: 11px;<br/> height: 1px;<br/> background: #333;<br/> animation: strikes 0.2s linear infinite;<br/>}<br/>.car .strike2 {<br/> top: 11px;<br/> animation-delay: 0.05s;<br/>}<br/>.car .strike3 {<br/> top: 22px;<br/> animation-delay: 0.1s;<br/>}<br/>.car .strike4 {<br/> top: 33px;<br/> animation-delay: 0.15s;<br/>}<br/>.car .strike5 {<br/> top: 44px;<br/> animation-delay: 0.2s;<br/>}<br/>.car-detail {<br/> position: absolute;<br/> display: block;<br/> background: #333;<br/> animation: speed 0.5s linear infinite;<br/>}<br/>.car-detail.spoiler {<br/> width: 0;<br/> height: 0;<br/> top: 7px;<br/> background: none;<br/> border: 20px solid transparent;<br/> border-bottom: 8px solid #333;<br/> border-left: 20px solid #333;<br/>}<br/>.car-detail.back {<br/> height: 20px;<br/> width: 92px;<br/> top: 15px;<br/> left: 0px;<br/>}<br/>.car-detail.center {<br/> height: 35px;<br/> width: 75px;<br/> left: 12px;<br/> border-top-left-radius: 30px;<br/> border-top-right-radius: 45px 40px;<br/> border: 4px solid #333;<br/> background: none;<br/> box-sizing: border-box;<br/>}<br/>.car-detail.center1 {<br/> height: 35px;<br/> width: 35px;<br/> left: 12px;<br/> border-top-left-radius: 30px;<br/>}<br/>.car-detail.front {<br/> height: 20px;<br/> width: 50px;<br/> top: 15px;<br/> left: 67px;<br/> border-top-right-radius: 50px 40px;<br/> border-bottom-right-radius: 10px;<br/>}<br/>.car-detail.wheel {<br/> height: 20px;<br/> width: 20px;<br/> border-radius: 50%;<br/> top: 20px;<br/> left: 12px;<br/> border: 3px solid #333333;<br/> background: linear-gradient(45deg, transparent 45%, #fff 46%, #fff 54%, transparent 55%), linear-gradient(-45deg, transparent 45%, #fff 46%, #fff 54%, transparent 55%), linear-gradient(90deg, transparent 45%, #fff 46%, #fff 54%, transparent 55%), linear-gradient(0deg, transparent 45%, #fff 46%, #fff 54%, transparent 55%), radial-gradient(#fff 29%, transparent 30%, transparent 50%, #fff 51%), #333333;<br/> animation-name: spin;<br/>}<br/>.car-detail.wheel2 {<br/> left: 82px;<br/>}<br/> |
Maka sehabis semua isyarat sudah ditulis buka file index.html dengan browser tampilan nya akan ibarat berikut:
Nah kini anda sudah berhasil membuat preloader mobil. Selamat belajar.
Terima Kasih telah membaca.
***PIU***
Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.
(Telah didownload 5 kali, 1x didownload hari ini)
