CSS, jQuery

CSS ve jQuery kullanılarak loading bar yapımı

06-alternate-simple-css-spinner-loader

Bazen siteler içerisinde barınan dosyaların yüklenmesi uzun sürebilir. Bu duruma karşılık kullanıcıları kaybetmemek adına dosyalar yüklenirken loading bar kullanılmaktadır. Loading bar oluşturulurken CSS‘in transition,animation özelliklerinden faydalanacağız. Örnek;

HTML yapınız şu şekilde olsun;

<div class = "loading_wrapper">
<div class = "loading_bar"></div>
</div>

<div class = "content">

<ul class="navbar">
<li><a href="">Anasayfa</a></li>
<li><a href="">Hakkımızda</a></li>
<li><a href="">Referanslarımız</a></li>
<li><a href="">İletişim</a></li>
</ul>

<div class="website_desc">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi praesentium commodi nesciunt distinctio aliquid, qui expedita a eius, iure vero odio. Magni, alias laboriosam quas culpa perspiciatis. Nostrum, quis, itaque!</div>

<br class = "clear" />

<div>Natus modi ut cupiditate. Quisquam repellendus sequi, quia eaque similique aut voluptate atque, molestiae molestias, accusantium facere. Nihil laudantium fugit eaque vel reprehenderit modi quos. Necessitatibus, labore, quidem. Deleniti, ad.</div>

<br class = "clear" />

<div>Dolorem at ipsum, id, praesentium nostrum ratione suscipit sapiente explicabo hic sit ab laboriosam, itaque minima, vitae inventore modi voluptas? Obcaecati fuga neque nemo eaque eum ullam explicabo assumenda. Suscipit.</div>

<br class = "clear" />

<div>Excepturi atque, tempora consequatur vel sit molestias reprehenderit! Laudantium dignissimos, iure earum rem, sunt facilis consequuntur. Ex quibusdam doloribus nisi vitae architecto, quo reiciendis et ut ducimus, alias nemo qui.</div>

<br class = "clear" />

<div>Nesciunt dicta debitis aut blanditiis adipisci ut, molestiae, animi quod maxime harum voluptatem! Magni sequi beatae sapiente reprehenderit consectetur, fuga perferendis quia nihil tempora. Odio nulla, ratione consequatur ipsa? Natus.</div>
</div>

</div>

 

CSS dosyanız;

* {margin:0;padding:0;list-style:none;font-family: 'Arial',sans-serif}
a {text-decoration: none;}
.loading_wrapper {
position: fixed;
background:#ffffff;
width:100%;
height:100%;
left:0;
top:0;
transition:all 0.4s ease;
-webkit-transition:all 0.4s ease;
}
.loading_bar {
width:100px;
height:100px;
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
border:4px solid #ededed;
border-left-color:skyblue;
border-radius:100%;
animation:rotate 700ms linear infinite;
-webkit-animation:rotate 700ms linear infinite;
z-index:2;
}

.loading_wrapper.active {
opacity:0;
visibility: hidden;
}

@keyframes rotate {
0% {
transform:rotate(0deg);
}

100% {
transform:rotate(360deg);
}
}

@-webkit-keyframes rotate {
0% {
transform:rotate(0deg);
}

100% {
transform:rotate(360deg);
}
}

.content {
padding:25px;
width:1170px;
margin:50px auto;
font-size:15px;
font-family: tahoma;
color:#565656;
line-height:22px;
}

.navbar {
width:100%;
border-top:1px solid #ededed;
border-bottom:1px solid #ededed;
text-align:center;
}

.navbar:after {
content:'';
display:block;
clear:both;
}

.navbar > li {
display: inline-block;
}

.navbar > li > a {
display:block;
padding:0 25px;
line-height:50px;
color:#565656;
}
.website_desc {
padding-top:40px;
}

 

jQuery dosyanız;

$(function() {
$(window).load(function(){
$(".loading_wrapper").delay(2000).queue(function(event){
$(this).addClass("active");
});
});
});

Örneğin canlı demosu için buraya tıklayınız.

2 Comments on “CSS ve jQuery kullanılarak loading bar yapımı

  1. Şahane bir örnek olmuş Sinan’cım, ellerine sağlık. Eminim ki bir çok arkadaşımız için çok faydalı olacaktır, bu tür çalışmalarının devamını bekliyor olacağız. 😉

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir