کد لودینگ با css

برای قرار دادن این کد در وبلاگ یا صفحات وب ابتدا باید کد زیر رو در فایل cssیا قبل از تگ <head/> در کدهای html قرار بدین.

<style>
  @keyframes iransystem{
    from{transform:rotate(0deg);}
    to{transform:rotate(180deg);}
  }
  @-moz-keyframes iransystem{
    from{-moz-transform:rotate(0deg);}
    to{-moz-transform:rotate(180deg);}
  }
  @-o-keyframes iransystem{
    from{-o-transform:rotate(0deg);}
    to{-o-transform:rotate(180deg);}
  }
  @-webkit-keyframes iransystem{
    from{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(180deg);}
  }
  @-ms-keyframes iransystem{
    from{-ms-transform:rotate(0deg);}
    to{-ms-transform:rotate(180deg);}
  }
  .virusLoading{
    border-radius:100px;
    -moz-border-radius:100px;
    -o-border-radius:100px;
    -ms-border-radius:100px;
    -webkit-border-radius:100px;
    width:50px;
    height:50px;
    border:3px transparent solid;
    border-right-color:#036;
    border-left-color:#036;
    margin:0 auto;
    animation:iransystem .5s infinite linear;
    -moz-animation:iransystem  .5s infinite linear;
    -o-animation:iransystem  .5s infinite linear;
    -webkit-animation:iransystem  .5s infinite linear;
    -ms-animation:iransystem  .5s infinite linear;
  }
</style>

سپس کد زیر را در هرجایی که میخواهید لودینگ نمایش دهد میتوانید قرار دهید.

<div class="iransystemLoading"></div>