Mẫu Radar Preloader với CSS3

Danh mục: CSS
 

Tiếp tục mang đến cho các bạn một mẫu loader bằng CSS3 và lần này là với kiểu thiết kế radar đẹp mắt.

css3, preloader, thu thuat css, css co ban, css tips

 Download

HTML

Các bạn chỉ cần đoạn html sau để tạo loader.

<div class="Radar"></div>

CSS

Tiếp theo thì các bạn chỉ việc copy toàn bộ đoạn css bên dưới dể tạo hiệu ứng preloader này.

.Radar {width: 75px;height: 75px;position: relative;background: #FFF;margin: 0 auto;overflow: hidden;border-radius: 50%;background: -webkit-gradient(linear, left top, right top, color-stop(10%, #2BA0C7), color-stop(40%, rgba(255, 255, 255, 0)));background: -webkit-linear-gradient(left, #2BA0C7 10%, rgba(255, 255, 255, 0) 40%);background: linear-gradient(to right, #2BA0C7 10%, rgba(255, 255, 255, 0) 40%);-webkit-animation: spinit 1.4s infinite linear;animation: spinit 1.4s infinite linear;}.Radar:before {width: 50%;height: 50%;background: #FFF;border-radius: 100% 0 0 0;position: absolute;top: 0;left: 0;content: '';}.Radar:after {background: #fff;width: 75%;height: 75%;border-radius: 999px;content: '';margin: auto;position: absolute;top: 0;left: 0;bottom: 0;right: 0;opacity: 0.6;}@-webkit-keyframes spinit {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes spinit {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}

 

 



BÀI VIẾT KHÁC
CODE GỢI Ý CHO BẠN
BẢN QUYỀN ®
Mọi chia sẻ nội dung thuộc tác quyền của Sharecode.vn phải ghi rõ "Nguồn Sharecode.vn"