FAZEL UNITY Blog

Create Everything

FAZEL UNITY Blog

Create Everything

طبقه بندی موضوعی
کلمات کلیدی

اهنگ بیس دار

fazel unity

boss

اهنگ خفن

music

اهنگ بیس دار خفن

fazel diseh

FAZEL UNITY Blog

fazelunity.blog.ir

افزایش سرعت کامپیوتر

اهنگ بیس دار خیلی قشنگ

fazeld3

cmd

افزایش سرعت سی پی یو

افزایش سرعت رم

افزایش سرعت استارت اپ

هک

نرم افزار افزایش سرعت کامپیوتر

fazel d3

کد

افزایش سرعت کامپیوتر تا حدی زیاد

کاور اهنگ

کد ساخت ماشین حساب

calculator

مخفی سازی اطلاعات

رمز گذاری پوشه ها

رمز گذاری فایل ها

رمز گذاری

رمز پوشه

رمز فایل

بایگانی
آخرین مطالب
مطالب پربحث‌تر
آخرین نظرات
پیوندهای روزانه

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

  • پنجشنبه, ۷ شهریور ۱۳۹۸، ۰۳:۵۹ ب.ظ
  • FAZEL UNITY

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

کد های زیر را بعد از تگ 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>

 

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

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

  • FAZEL UNITY

loading code

ساخت صفحه درحال بارگیری

ساخت صفحه لودینگ

صفحه لودینگ

کد صفحه لودینگ

نظرات  (۸)

  • ۰۹ شهریور ۹۹ ، ۱۳:۰۷
  • ali rabbani
    • سلام
    ببخشید
    میشه به جای اون چرخ دنده ها گیف دلخواه خودمو بزرم؟
  • ۰۹ شهریور ۹۸ ، ۲۱:۵۷
  • امیر +
    • سلام .
    من الان دارم با زبون سی شارپ کار میکنم و هنوز اون اولاشم و خیلی از برنامه نویسی سر در نمیاوردم .
    مفهوم string رو متوجه نمیشم و چه زمانهایی میتونیم از این استفاده کنیم . میشه توضیح بدین ؟ البته اگه میدونین
    ممنون
    پاسخ:
    سلام.
    مفهوم String خیلی سادس .
    معنیش : رشته (متن)
    کار برد : نمایش متن ها یا ساخت متن یا...
    توضیحات :
    این کلمه توی 80% زبان های برنامه نویسی رایجه که برای استفاده ازش لازمه :

    String demo = "Demo"
    در بعضی از جاها با عبارت های های " و " شروع و تموم میشه مثل

    Console.Write("this is String");
    به زبان ساده :

    string همون متن هارو توی خودش جای میده

    نمونه کد (برای فهمیدن بهتر) :


    String str = "This is Text String";
Console.Write(str);
Console.ReadLine();
    امید وارم فهمیده باشی :)
    درضمن String خیلی اپشن اره که من نگفنم تا گیج نشی

  • ۰۹ شهریور ۹۸ ، ۰۹:۲۹
  • محمدصالح کامیاب
    • کار با svg خیلی سخته.
    پاسخ:
    من هم خیلی کار svg رو بلد نیستم توی گوگل کد هاشون رو پیدا میکنم
  • ۰۷ شهریور ۹۸ ، ۲۰:۵۱
  • pesar pesar
    • سلام.خوشحال میشم به وبلاگ من سربزنی و مطالبمو بخونی.اگر خواستی دنبالم کنی بگو تا منم دنبالت کنم/
    پاسخ:
    سلام دنبال شده بودی 
  • ۰۷ شهریور ۹۸ ، ۱۷:۳۹
  • حسین ...
    • کارت شیک بود افرین
    پاسخ:
    ممنون
  • ۰۷ شهریور ۹۸ ، ۱۷:۱۶
  • محمد صدرا عبدالعلی زاده
    • سلام.خیلی جالب بود.
    لطفا رنگ زرد هم بزار(چون رنگ بندی قالب من زرده)
    مررررررسی
    پاسخ:
    بزودی
  • ۰۷ شهریور ۹۸ ، ۱۷:۰۹
  • معلمی از جنس اینده
    • سلام این کد ها در وبلاگ من درست کار نمی کنه یعنی تا وبلاگم رو باز می کنم صفحه لودینگ پست مطالب هست.
    پاسخ:
    کد ها مشکل داشتن درست شدن
  • ۰۷ شهریور ۹۸ ، ۱۶:۲۱
  • ناشناس
    • ایول بابا ایول
    پاسخ:
    ممنون
    ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
    تجدید کد امنیتی
    ساخت وبلاگ در بلاگ بیان، رسانه متخصصان و اهل قلم