CSS

CSS ile windows tarzı loading bar yapımı

Loading bar web sayfaları yüklenirken kullanıcılara daha güzel bir görüntü vermek amacıyla kullanılmaktadır. Bu makalede windows tarzında loading barın nasıl yapıldığını göreceğiz. Bir örnek ile açıklayacak olursak;

HTML yapısı;

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

CSS yapısı;

* {margin:0;padding:0;list-style:none;box-sizing:border-box;font-family: 'Arial',sans-serif}
  a {text-decoration: none;}
  body {
    background:#111;
  }
  .loading_wrapper {
    width:70px;
    height:70px;
    margin:0px auto;
    margin-top:255px;
    position: relative;
  }

  .loading_wrapper .circle {
    position: absolute;
    width:70px;
    height:70px;
    opacity:0;
    transform:rotate(225deg);
    animation-name: loading;
    animation-iteration-count: infinite;
      animation-duration: 5.5s;
  }

  .loading_wrapper .circle:after {
    content: '';
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 5px;
      background: #ffffff;
  }

  .loading_wrapper .circle:nth-child(2) {  animation-delay: 240ms; }
    .loading_wrapper .circle:nth-child(3) {  animation-delay: 480ms; }
    .loading_wrapper .circle:nth-child(4) {  animation-delay: 720ms; }
    .loading_wrapper .circle:nth-child(5) {  animation-delay: 960ms; }

    @keyframes loading { 
    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; } 
  }

Örneği canlı görebilmek için buraya tıklayınız.

Bir Cevap Yazın

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