FAZEL UNITY Blog

آموزش گذاشتن صفحه درحال بارگیری (لودینگ) برای وبلاگ (بدون جاوا اسکریپت) (ویرایش شده)

کد های زیر را بعد از تگ body بنویسید

کد ها :

1. <صفحه لودینگ رنگ قرمز سبز ابی (RGB) :

پیش نمایش :

کد :

<style>
#Load{
     position: fixed;
     z-index: 9999;
     background: #000;
     animation: 2.5s load;
     -moz-animation: load 2.5s;
     -webkit-animation: load 2.5s;
     -o-animation: load 2.5s;
     right: 1000%;
     width: 100%;
     height:100%;
 }

.load {
  position: relative;
  margin: 50px auto;
  width: 100px;
  height: 80px;
}

.gear {
  position: absolute;
  z-index: -10;
  width: 40px;
  height: 40px;
  -webkit-animation: spin 5s infinite;
          animation: spin 5s infinite;
}

.two {
  left: 40px;
  width: 80px;
  height: 80px;
  -webkit-animation: spin-reverse 5s infinite;
          animation: spin-reverse 5s infinite;
}

.three {
  top: 45px;
  left: -10px;
  width: 60px;
  height: 60px;
}

@-moz-keyframes load {
    0% {
        right:0;
    }
    99%{
        right:0;
    }

    100% {
        right:0;
    }

}
@-o-keyframes load {
    0% {
        right:0;
    }
    99%{
        right:0;
    }

    100% {
        right:0;
    }

}
@keyframes load {
    0% {
        right:0;
    }
    99%{
        right:0;
    }

    100% {
        right:0;
    }

}
@-webkit-keyframes spin {
  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes spin-reverse {
  50% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@keyframes spin-reverse {
  50% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
.lil-circle {
  position: absolute;
  border-radius: 50%;

  width: 100px;
  height: 100px;
  opacity: .65;
}

.blur-circle {
  position: absolute;
  top: -19px;
  left: -19px;
}

.text-loading {
      top:20px;
      position: relative;
  color: #fff;
  font-size: 18px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}

</style>
<div id="Load">
<div class="load">
<div class="gear one">
<svg id="blue" fill="#00ff00" viewBox="0 0 100 100">
<path d="M97.6,55.7V44.3l-13.6-2.9c-0.8-3.3-2.1-6.4-3.9-9.3l7.6-11.7l-8-8L67.9,20c-2.9-1.7-6-3.1-9.3-3.9L55.7,2.4H44.3l-2.9,13.6 c-3.3,0.8-6.4,2.1-9.3,3.9l-11.7-7.6l-8,8L20,32.1c-1.7,2.9-3.1,6-3.9,9.3L2.4,44.3v11.4l13.6,2.9c0.8,3.3,2.1,6.4,3.9,9.3 l-7.6,11.7l8,8L32.1,80c2.9,1.7,6,3.1,9.3,3.9l2.9,13.6h11.4l2.9-13.6c3.3-0.8,6.4-2.1,9.3-3.9l11.7,7.6l8-8L80,67.9 c1.7-2.9,3.1-6,3.9-9.3L97.6,55.7z M50,65.6c-8.7,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6s15.6,7,15.6,15.6S58.7,65.6,50,65.6z"></path>
</svg>
</div>
<div class="gear two">
<svg id="pink" fill="#ff0050" viewBox="0 0 100 100">
<path d="M97.6,55.7V44.3l-13.6-2.9c-0.8-3.3-2.1-6.4-3.9-9.3l7.6-11.7l-8-8L67.9,20c-2.9-1.7-6-3.1-9.3-3.9L55.7,2.4H44.3l-2.9,13.6 c-3.3,0.8-6.4,2.1-9.3,3.9l-11.7-7.6l-8,8L20,32.1c-1.7,2.9-3.1,6-3.9,9.3L2.4,44.3v11.4l13.6,2.9c0.8,3.3,2.1,6.4,3.9,9.3 l-7.6,11.7l8,8L32.1,80c2.9,1.7,6,3.1,9.3,3.9l2.9,13.6h11.4l2.9-13.6c3.3-0.8,6.4-2.1,9.3-3.9l11.7,7.6l8-8L80,67.9 c1.7-2.9,3.1-6,3.9-9.3L97.6,55.7z M50,65.6c-8.7,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6s15.6,7,15.6,15.6S58.7,65.6,50,65.6z"></path>
</svg>
</div>
<div class="gear three">
<svg id="yellow" fill="#0000ff" viewBox="0 0 100 100">
<path d="M97.6,55.7V44.3l-13.6-2.9c-0.8-3.3-2.1-6.4-3.9-9.3l7.6-11.7l-8-8L67.9,20c-2.9-1.7-6-3.1-9.3-3.9L55.7,2.4H44.3l-2.9,13.6 c-3.3,0.8-6.4,2.1-9.3,3.9l-11.7-7.6l-8,8L20,32.1c-1.7,2.9-3.1,6-3.9,9.3L2.4,44.3v11.4l13.6,2.9c0.8,3.3,2.1,6.4,3.9,9.3 l-7.6,11.7l8,8L32.1,80c2.9,1.7,6,3.1,9.3,3.9l2.9,13.6h11.4l2.9-13.6c3.3-0.8,6.4-2.1,9.3-3.9l11.7,7.6l8-8L80,67.9 c1.7-2.9,3.1-6,3.9-9.3L97.6,55.7z M50,65.6c-8.7,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6s15.6,7,15.6,15.6S58.7,65.6,50,65.6z"></path>
</svg>
</div>
<div class="lil-circle"></div>
<svg class="blur-circle">
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="0"></feGaussianBlur>
</filter>
<circle cx="70" cy="70" r="66" fill="transparent" stroke="#000" stroke-width="40" filter="url(#blur)"></circle>
</svg>
</div>
<div class="text-loading">Loading ...</div>
</div>

>

2. <صفحه لودینگ رنگ مشکی :

پیش نمایش :

کد :

<style>
 #Load{
     position: fixed;
     z-index: 9999;
     background: #CFCFCF;
     animation: 2.5s load;
     -moz-animation: load 2.5s;
     -webkit-animation: load 2.5s;
     -o-animation: load 2.5s;
     right: 1000%;
     width: 100%;
     height:100%;
 }

.load {
  position: relative;
  margin: 50px auto;
  width: 100px;
  height: 80px;
}

.gear {
  position: absolute;
  z-index: -10;
  width: 40px;
  height: 40px;
  -webkit-animation: spin 5s infinite;
          animation: spin 5s infinite;
}

.two {
  left: 40px;
  width: 80px;
  height: 80px;
  -webkit-animation: spin-reverse 5s infinite;
          animation: spin-reverse 5s infinite;
}

.three {
  top: 45px;
  left: -10px;
  width: 60px;
  height: 60px;
}

@-moz-keyframes load {
    0% {
        right:0;
    }
    99%{
        right:0;
    }

    100% {
        right:0;
    }

}
@-o-keyframes load {
    0% {
        right:0;
    }
    99%{
        right:0;
    }

    100% {
        right:0;
    }

}
@keyframes load {
    0% {
        right:0;
    }
    99%{
        right:0;
    }

    100% {
        right:0;
    }

}
@-webkit-keyframes spin {
  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes spin-reverse {
  50% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@keyframes spin-reverse {
  50% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
.lil-circle {
  position: absolute;
  border-radius: 50%;

  width: 100px;
  height: 100px;
  opacity: .65;
}

.blur-circle {
  position: absolute;
  top: -19px;
  left: -19px;
}

.text-loading {
      top:20px;
      position: relative;
  color: #000;
  font-size: 18px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}

</style>
<div id="Load">
<div class="load">
<div class="gear one">
<svg id="blue" fill="#262626" viewBox="0 0 100 100">
<path d="M97.6,55.7V44.3l-13.6-2.9c-0.8-3.3-2.1-6.4-3.9-9.3l7.6-11.7l-8-8L67.9,20c-2.9-1.7-6-3.1-9.3-3.9L55.7,2.4H44.3l-2.9,13.6 c-3.3,0.8-6.4,2.1-9.3,3.9l-11.7-7.6l-8,8L20,32.1c-1.7,2.9-3.1,6-3.9,9.3L2.4,44.3v11.4l13.6,2.9c0.8,3.3,2.1,6.4,3.9,9.3 l-7.6,11.7l8,8L32.1,80c2.9,1.7,6,3.1,9.3,3.9l2.9,13.6h11.4l2.9-13.6c3.3-0.8,6.4-2.1,9.3-3.9l11.7,7.6l8-8L80,67.9 c1.7-2.9,3.1-6,3.9-9.3L97.6,55.7z M50,65.6c-8.7,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6s15.6,7,15.6,15.6S58.7,65.6,50,65.6z"></path>
</svg>
</div>
<div class="gear two">
<svg id="pink" fill="#262626" viewBox="0 0 100 100">
<path d="M97.6,55.7V44.3l-13.6-2.9c-0.8-3.3-2.1-6.4-3.9-9.3l7.6-11.7l-8-8L67.9,20c-2.9-1.7-6-3.1-9.3-3.9L55.7,2.4H44.3l-2.9,13.6 c-3.3,0.8-6.4,2.1-9.3,3.9l-11.7-7.6l-8,8L20,32.1c-1.7,2.9-3.1,6-3.9,9.3L2.4,44.3v11.4l13.6,2.9c0.8,3.3,2.1,6.4,3.9,9.3 l-7.6,11.7l8,8L32.1,80c2.9,1.7,6,3.1,9.3,3.9l2.9,13.6h11.4l2.9-13.6c3.3-0.8,6.4-2.1,9.3-3.9l11.7,7.6l8-8L80,67.9 c1.7-2.9,3.1-6,3.9-9.3L97.6,55.7z M50,65.6c-8.7,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6s15.6,7,15.6,15.6S58.7,65.6,50,65.6z"></path>
</svg>
</div>
<div class="gear three">
<svg id="yellow" fill="#262626" viewBox="0 0 100 100">
<path d="M97.6,55.7V44.3l-13.6-2.9c-0.8-3.3-2.1-6.4-3.9-9.3l7.6-11.7l-8-8L67.9,20c-2.9-1.7-6-3.1-9.3-3.9L55.7,2.4H44.3l-2.9,13.6 c-3.3,0.8-6.4,2.1-9.3,3.9l-11.7-7.6l-8,8L20,32.1c-1.7,2.9-3.1,6-3.9,9.3L2.4,44.3v11.4l13.6,2.9c0.8,3.3,2.1,6.4,3.9,9.3 l-7.6,11.7l8,8L32.1,80c2.9,1.7,6,3.1,9.3,3.9l2.9,13.6h11.4l2.9-13.6c3.3-0.8,6.4-2.1,9.3-3.9l11.7,7.6l8-8L80,67.9 c1.7-2.9,3.1-6,3.9-9.3L97.6,55.7z M50,65.6c-8.7,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6s15.6,7,15.6,15.6S58.7,65.6,50,65.6z"></path>
</svg>
</div>
<div class="lil-circle"></div>
<svg class="blur-circle">
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="0"></feGaussianBlur>
</filter>
<circle cx="70" cy="70" r="66" fill="transparent" stroke="#cfcfcf" stroke-width="40" filter="url(#blur)"></circle>
</svg>
</div>
<div class="text-loading">Loading ...</div>
</div>

>

3. <صفحه لودینگ رنگ سبز :

پیش نمایش :

کد :

<style>

 #Load{
     position: fixed;
     background: #fff;
     z-index: 9999;
     animation: 2.5s load;
     -moz-animation: load 2.5s;
     -webkit-animation: load 2.5s;
     -o-animation: load 2.5s;
     right: 1000%;
     width: 100%;
     height:100%;
 }

.load {
  position: relative;
  margin: 50px auto;
  width: 100px;
  height: 80px;
}

.gear {
  position: absolute;
  z-index: -10;
  width: 40px;
  height: 40px;
  -webkit-animation: spin 5s infinite;
          animation: spin 5s infinite;
}

.two {
  left: 40px;
  width: 80px;
  height: 80px;
  -webkit-animation: spin-reverse 5s infinite;
          animation: spin-reverse 5s infinite;
}

.three {
  top: 45px;
  left: -10px;
  width: 60px;
  height: 60px;
}

@-moz-keyframes load {
    0% {
        right:0;
    }
    99%{
        right:0;
    }

    100% {
        right:0;
    }

}
@-o-keyframes load {
    0% {
        right:0;
    }
    99%{
        right:0;
    }

    100% {
        right:0;
    }

}
@keyframes load {
    0% {
        right:0;
    }
    99%{
        right:0;
    }

    100% {
        right:0;
    }

}
@-webkit-keyframes spin {
  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes spin-reverse {
  50% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@keyframes spin-reverse {
  50% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
.lil-circle {
  position: absolute;
  border-radius: 50%;

  width: 100px;
  height: 100px;
  opacity: .65;
}

.blur-circle {
  position: absolute;
  top: -19px;
  left: -19px;
}

.text-loading {
      top:20px;
      position: relative;
  color: #000;
  font-size: 18px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}

</style>
<div id="Load">
<div class="load">
<div class="gear one">
<svg id="blue" fill="#00CC66" viewBox="0 0 100 100">
<path d="M97.6,55.7V44.3l-13.6-2.9c-0.8-3.3-2.1-6.4-3.9-9.3l7.6-11.7l-8-8L67.9,20c-2.9-1.7-6-3.1-9.3-3.9L55.7,2.4H44.3l-2.9,13.6 c-3.3,0.8-6.4,2.1-9.3,3.9l-11.7-7.6l-8,8L20,32.1c-1.7,2.9-3.1,6-3.9,9.3L2.4,44.3v11.4l13.6,2.9c0.8,3.3,2.1,6.4,3.9,9.3 l-7.6,11.7l8,8L32.1,80c2.9,1.7,6,3.1,9.3,3.9l2.9,13.6h11.4l2.9-13.6c3.3-0.8,6.4-2.1,9.3-3.9l11.7,7.6l8-8L80,67.9 c1.7-2.9,3.1-6,3.9-9.3L97.6,55.7z M50,65.6c-8.7,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6s15.6,7,15.6,15.6S58.7,65.6,50,65.6z"></path>
</svg>
</div>
<div class="gear two">
<svg id="pink" fill="#00CC66" viewBox="0 0 100 100">
<path d="M97.6,55.7V44.3l-13.6-2.9c-0.8-3.3-2.1-6.4-3.9-9.3l7.6-11.7l-8-8L67.9,20c-2.9-1.7-6-3.1-9.3-3.9L55.7,2.4H44.3l-2.9,13.6 c-3.3,0.8-6.4,2.1-9.3,3.9l-11.7-7.6l-8,8L20,32.1c-1.7,2.9-3.1,6-3.9,9.3L2.4,44.3v11.4l13.6,2.9c0.8,3.3,2.1,6.4,3.9,9.3 l-7.6,11.7l8,8L32.1,80c2.9,1.7,6,3.1,9.3,3.9l2.9,13.6h11.4l2.9-13.6c3.3-0.8,6.4-2.1,9.3-3.9l11.7,7.6l8-8L80,67.9 c1.7-2.9,3.1-6,3.9-9.3L97.6,55.7z M50,65.6c-8.7,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6s15.6,7,15.6,15.6S58.7,65.6,50,65.6z"></path>
</svg>
</div>
<div class="gear three">
<svg id="yellow" fill="#00CC66" viewBox="0 0 100 100">
<path d="M97.6,55.7V44.3l-13.6-2.9c-0.8-3.3-2.1-6.4-3.9-9.3l7.6-11.7l-8-8L67.9,20c-2.9-1.7-6-3.1-9.3-3.9L55.7,2.4H44.3l-2.9,13.6 c-3.3,0.8-6.4,2.1-9.3,3.9l-11.7-7.6l-8,8L20,32.1c-1.7,2.9-3.1,6-3.9,9.3L2.4,44.3v11.4l13.6,2.9c0.8,3.3,2.1,6.4,3.9,9.3 l-7.6,11.7l8,8L32.1,80c2.9,1.7,6,3.1,9.3,3.9l2.9,13.6h11.4l2.9-13.6c3.3-0.8,6.4-2.1,9.3-3.9l11.7,7.6l8-8L80,67.9 c1.7-2.9,3.1-6,3.9-9.3L97.6,55.7z M50,65.6c-8.7,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6s15.6,7,15.6,15.6S58.7,65.6,50,65.6z"></path>
</svg>
</div>
<div class="lil-circle"></div>
<svg class="blur-circle">
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="0"></feGaussianBlur>
</filter>
<circle cx="70" cy="70" r="66" fill="transparent" stroke="#fff" stroke-width="40" filter="url(#blur)"></circle>
</svg>
</div>
<div class="text-loading">Loading ...</div>
</div>

>

4. <صفحه لودینگ رنگ ابی :

پیش نمایش :

کد :

<style>
#Load{
     position: fixed;
     background: #252525;
     animation: 2.5s load;
     -moz-animation: load 2.5s;
     -webkit-animation: load 2.5s;
     -o-animation: load 2.5s;
     right: 1000%;
     z-index:9999;
     width: 100%;
     height:100%;
 }

.load {
  position: relative;
  margin: 50px auto;
  width: 100px;
  height: 80px;
}

.gear {
  position: absolute;
  z-index: -10;
  width: 40px;
  height: 40px;
  -webkit-animation: spin 5s infinite;
          animation: spin 5s infinite;
}

.two {
  left: 40px;
  width: 80px;
  height: 80px;
  -webkit-animation: spin-reverse 5s infinite;
          animation: spin-reverse 5s infinite;
}

.three {
  top: 45px;
  left: -10px;
  width: 60px;
  height: 60px;
}

@-moz-keyframes load {
    0% {
        right:0;
    }
    99%{
        right:0;
    }

    100% {
        right:0;
    }

}
@-o-keyframes load {
    0% {
        right:0;
    }
    99%{
        right:0;
    }

    100% {
        right:0;
    }

}
@keyframes load {
    0% {
        right:0;
    }
    99%{
        right:0;
    }

    100% {
        right:0;
    }

}
@-webkit-keyframes spin {
  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes spin-reverse {
  50% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@keyframes spin-reverse {
  50% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
.lil-circle {
  position: absolute;
  border-radius: 50%;

  width: 100px;
  height: 100px;
  opacity: .65;
}

.blur-circle {
  position: absolute;
  top: -19px;
  left: -19px;
}

.text-loading {
      top:20px;
      position: relative;
  color: #fff;
  font-size: 18px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}

</style>
<div id="Load">
<div class="load">
<div class="gear one">
<svg id="blue" fill="#1253cc" viewBox="0 0 100 100">
<path d="M97.6,55.7V44.3l-13.6-2.9c-0.8-3.3-2.1-6.4-3.9-9.3l7.6-11.7l-8-8L67.9,20c-2.9-1.7-6-3.1-9.3-3.9L55.7,2.4H44.3l-2.9,13.6 c-3.3,0.8-6.4,2.1-9.3,3.9l-11.7-7.6l-8,8L20,32.1c-1.7,2.9-3.1,6-3.9,9.3L2.4,44.3v11.4l13.6,2.9c0.8,3.3,2.1,6.4,3.9,9.3 l-7.6,11.7l8,8L32.1,80c2.9,1.7,6,3.1,9.3,3.9l2.9,13.6h11.4l2.9-13.6c3.3-0.8,6.4-2.1,9.3-3.9l11.7,7.6l8-8L80,67.9 c1.7-2.9,3.1-6,3.9-9.3L97.6,55.7z M50,65.6c-8.7,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6s15.6,7,15.6,15.6S58.7,65.6,50,65.6z"></path>
</svg>
</div>
<div class="gear two">
<svg id="pink" fill="#1253cc" viewBox="0 0 100 100">
<path d="M97.6,55.7V44.3l-13.6-2.9c-0.8-3.3-2.1-6.4-3.9-9.3l7.6-11.7l-8-8L67.9,20c-2.9-1.7-6-3.1-9.3-3.9L55.7,2.4H44.3l-2.9,13.6 c-3.3,0.8-6.4,2.1-9.3,3.9l-11.7-7.6l-8,8L20,32.1c-1.7,2.9-3.1,6-3.9,9.3L2.4,44.3v11.4l13.6,2.9c0.8,3.3,2.1,6.4,3.9,9.3 l-7.6,11.7l8,8L32.1,80c2.9,1.7,6,3.1,9.3,3.9l2.9,13.6h11.4l2.9-13.6c3.3-0.8,6.4-2.1,9.3-3.9l11.7,7.6l8-8L80,67.9 c1.7-2.9,3.1-6,3.9-9.3L97.6,55.7z M50,65.6c-8.7,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6s15.6,7,15.6,15.6S58.7,65.6,50,65.6z"></path>
</svg>
</div>
<div class="gear three">
<svg id="yellow" fill="#1253cc" viewBox="0 0 100 100">
<path d="M97.6,55.7V44.3l-13.6-2.9c-0.8-3.3-2.1-6.4-3.9-9.3l7.6-11.7l-8-8L67.9,20c-2.9-1.7-6-3.1-9.3-3.9L55.7,2.4H44.3l-2.9,13.6 c-3.3,0.8-6.4,2.1-9.3,3.9l-11.7-7.6l-8,8L20,32.1c-1.7,2.9-3.1,6-3.9,9.3L2.4,44.3v11.4l13.6,2.9c0.8,3.3,2.1,6.4,3.9,9.3 l-7.6,11.7l8,8L32.1,80c2.9,1.7,6,3.1,9.3,3.9l2.9,13.6h11.4l2.9-13.6c3.3-0.8,6.4-2.1,9.3-3.9l11.7,7.6l8-8L80,67.9 c1.7-2.9,3.1-6,3.9-9.3L97.6,55.7z M50,65.6c-8.7,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6s15.6,7,15.6,15.6S58.7,65.6,50,65.6z"></path>
</svg>
</div>
<div class="lil-circle"></div>
<svg class="blur-circle">
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="0"></feGaussianBlur>
</filter>
<circle cx="70" cy="70" r="66" fill="transparent" stroke="#252525" stroke-width="40" filter="url(#blur)"></circle>
</svg>
</div>
<div class="text-loading">Loading ...</div>
</div>

>

4. <صفحه لودینگ رنگ زرد (درخواستیsadra-daily) :

پیش نمایش :

کد :

<style>
#Load{
     width: 100%;
     position: fixed;
     background: #FFE293;
     z-index: 999;
     animation: 2.5s load;
     -moz-animation: load 2.5s;
     -webkit-animation: load 2.5s;
     -o-animation: load 2.5s;
     right: 1000%;
     width: 100%;
     height:100%;
 }

.load {
  position: relative;
  margin: 50px auto;
  width: 100px;
  height: 80px;
}

.gear {
  position: absolute;
  z-index: -10;
  width: 40px;
  height: 40px;
  -webkit-animation: spin 5s infinite;
          animation: spin 5s infinite;
}

.two {
  left: 40px;
  width: 80px;
  height: 80px;
  -webkit-animation: spin-reverse 5s infinite;
          animation: spin-reverse 5s infinite;
}

.three {
  top: 45px;
  left: -10px;
  width: 60px;
  height: 60px;
}

@-moz-keyframes load {
    0% {
        right:0;
    }
    99%{
        right:0;
    }

    100% {
        right:0;
    }

}
@-o-keyframes load {
    0% {
        right:0;
    }
    99%{
        right:0;
    }

    100% {
        right:0;
    }

}
@keyframes load {
    0% {
        right:0;
    }
    99%{
        right:0;
    }

    100% {
        right:0;
    }

}
@-webkit-keyframes spin {
  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes spin-reverse {
  50% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@keyframes spin-reverse {
  50% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
.lil-circle {
  position: absolute;
  border-radius: 50%;

  width: 100px;
  height: 100px;
  opacity: .65;
}

.blur-circle {
  position: absolute;
  top: -19px;
  left: -19px;
}

.text-loading {
      top:20px;
      position: relative;
  color: #000;
  font-size: 18px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}

</style>
<div id="Load">
<div class="load">
<div class="gear one">
<svg id="blue" fill="#f26363" viewBox="0 0 100 100">
<path d="M97.6,55.7V44.3l-13.6-2.9c-0.8-3.3-2.1-6.4-3.9-9.3l7.6-11.7l-8-8L67.9,20c-2.9-1.7-6-3.1-9.3-3.9L55.7,2.4H44.3l-2.9,13.6 c-3.3,0.8-6.4,2.1-9.3,3.9l-11.7-7.6l-8,8L20,32.1c-1.7,2.9-3.1,6-3.9,9.3L2.4,44.3v11.4l13.6,2.9c0.8,3.3,2.1,6.4,3.9,9.3 l-7.6,11.7l8,8L32.1,80c2.9,1.7,6,3.1,9.3,3.9l2.9,13.6h11.4l2.9-13.6c3.3-0.8,6.4-2.1,9.3-3.9l11.7,7.6l8-8L80,67.9 c1.7-2.9,3.1-6,3.9-9.3L97.6,55.7z M50,65.6c-8.7,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6s15.6,7,15.6,15.6S58.7,65.6,50,65.6z"></path>
</svg>
</div>
<div class="gear two">
<svg id="pink" fill="#f26363" viewBox="0 0 100 100">
<path d="M97.6,55.7V44.3l-13.6-2.9c-0.8-3.3-2.1-6.4-3.9-9.3l7.6-11.7l-8-8L67.9,20c-2.9-1.7-6-3.1-9.3-3.9L55.7,2.4H44.3l-2.9,13.6 c-3.3,0.8-6.4,2.1-9.3,3.9l-11.7-7.6l-8,8L20,32.1c-1.7,2.9-3.1,6-3.9,9.3L2.4,44.3v11.4l13.6,2.9c0.8,3.3,2.1,6.4,3.9,9.3 l-7.6,11.7l8,8L32.1,80c2.9,1.7,6,3.1,9.3,3.9l2.9,13.6h11.4l2.9-13.6c3.3-0.8,6.4-2.1,9.3-3.9l11.7,7.6l8-8L80,67.9 c1.7-2.9,3.1-6,3.9-9.3L97.6,55.7z M50,65.6c-8.7,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6s15.6,7,15.6,15.6S58.7,65.6,50,65.6z"></path>
</svg>
</div>
<div class="gear three">
<svg id="yellow" fill="#f26363" viewBox="0 0 100 100">
<path d="M97.6,55.7V44.3l-13.6-2.9c-0.8-3.3-2.1-6.4-3.9-9.3l7.6-11.7l-8-8L67.9,20c-2.9-1.7-6-3.1-9.3-3.9L55.7,2.4H44.3l-2.9,13.6 c-3.3,0.8-6.4,2.1-9.3,3.9l-11.7-7.6l-8,8L20,32.1c-1.7,2.9-3.1,6-3.9,9.3L2.4,44.3v11.4l13.6,2.9c0.8,3.3,2.1,6.4,3.9,9.3 l-7.6,11.7l8,8L32.1,80c2.9,1.7,6,3.1,9.3,3.9l2.9,13.6h11.4l2.9-13.6c3.3-0.8,6.4-2.1,9.3-3.9l11.7,7.6l8-8L80,67.9 c1.7-2.9,3.1-6,3.9-9.3L97.6,55.7z M50,65.6c-8.7,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6s15.6,7,15.6,15.6S58.7,65.6,50,65.6z"></path>
</svg>
</div>
<div class="lil-circle"></div>
<svg class="blur-circle">
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="0"></feGaussianBlur>
</filter>
<circle cx="70" cy="70" r="66" fill="transparent" stroke="#FFE293" stroke-width="40" filter="url(#blur)"></circle>
</svg>
</div>
<div class="text-loading">Loading ...</div>
</div>

بزودی با جاوا اسکریپت بصورت دقیق صفحه لودینگ ساخته میشه و منتشر میشه

نظر فراموش نشه