کد لود صحفه جذاب | چهار آنلاین

کد لود صحفه جذاب | چهار آنلاین

رزرو تبلیغــات

تعرفه تبلیغات
logo
تعرفه تبلیغات تعرفه تبلیغات

شمـا میتوانیــد برای دریافت آخرین مطالب و آگاهی از آخریـن اخبــار گلریـز وبـــ در ایمیـــل خـود در خبــرنامـه ثـبت نـام کنــید

http://s6.picofile.com/file/8209025292/Screen_Shot.png

کدphp:

<!DOCTYPE html> 
<
html lang="en">
<
head>
    <
meta charset="UTF-8">
    <
title>LOADING 4oNliNe</title>
    <
style type="text/css">
        * {
          
box-sizingborder-box;
        }
        
body {
          
background#e0e0e0;
        
}
        .
spinner_svg {
          
positionrelative;
          
z-index400;
        }
        
#Group {
          
stroke-dasharray142;
          
stroke-dashoffset142;
          -
webkit-animationdash 8s cubic-bezier(0.020.610.850.98infinite;
                  
animationdash 8s cubic-bezier(0.020.610.850.98infinite;
        }
        
#Oval-1 {
          
fillnone;
          -
webkit-transform-origin22.5px 22.5px;
              -
ms-transform-origin22.5px 22.5px;
                  
transform-origin22.5px 22.5px;
          -
webkit-animationpulsate 8s infinite;
                  
animationpulsate 8s infinite;
        }
        
#Oval-2,
        #Oval-3,
        #Oval-4 {
          
fillnone;
          -
webkit-transform-origin22.5px 22.5px;
              -
ms-transform-origin22.5px 22.5px;
                  
transform-origin22.5px 22.5px;
          
opacity0;
        }
        
#Oval-2 {
          
-webkit-animationfloat 8s ease 3s infinite;
                  
animationfloat 8s ease 3s infinite;
        }
        
#Oval-3 {
          
-webkit-animationfloat2 8s ease 4s infinite;
                  
animationfloat2 8s ease 4s infinite;
        }
        
#Oval-4 {
          
-webkit-animationfloat3 8s ease 5s infinite;
                  
animationfloat3 8s ease 5s infinite;
        }
        @-
webkit-keyframes dash {
          
25% {
            
stroke-dashoffset0;
            
opacityinherit;
          }
          
75% {
            
opacity1;
            
stroke-dashoffset0;
          }
          
99% {
            
opacity0;
            
stroke-dashoffset0;
          }
          
100% {
            
stroke-dashoffset142;
          }
        }
        @
keyframes dash {
          
25% {
            
stroke-dashoffset0;
            
opacityinherit;
          }
          
75% {
            
opacity1;
            
stroke-dashoffset0;
          }
          
99% {
            
opacity0;
            
stroke-dashoffset0;
          }
          
100% {
            
stroke-dashoffset142;
          }
        }
        @-
webkit-keyframes pulsate {
          
0% {
            
opacity1;
          }
          
25% {
            -
webkit-transformscale(1);
                    
transformscale(1);
            -
webkit-animation-timing-function: cubic-bezier(00.960.560.97);
                    
animation-timing-function: cubic-bezier(00.960.560.97);
          }
          
28% {
            -
webkit-transformscale(0.6);
                    
transformscale(0.6);
            -
webkit-animation-timing-function: ease-in;
                    
animation-timing-function: ease-in;
          }
          
37.5% {
            -
webkit-transformscale(0.95);
                    
transformscale(0.95);
            -
webkit-animation-timing-function: cubic-bezier(00.960.560.97);
                    
animation-timing-function: cubic-bezier(00.960.560.97);
          }
          
40.5% {
            -
webkit-transformscale(0.6);
                    
transformscale(0.6);
            -
webkit-animation-timing-function: ease-in;
                    
animation-timing-function: ease-in;
          }
          
50% {
            -
webkit-transformscale(0.9);
                    
transformscale(0.9);
            -
webkit-animation-timing-function: cubic-bezier(00.960.560.97);
                    
animation-timing-function: cubic-bezier(00.960.560.97);
          }
          
53% {
            -
webkit-transformscale(0.6);
                    
transformscale(0.6);
            -
webkit-animation-timing-function: ease-in;
                    
animation-timing-function: ease-in;
          }
          
62.5% {
            -
webkit-transformscale(0.85);
                    
transformscale(0.85);
            -
webkit-animation-timing-function: cubic-bezier(00.960.560.97);
                    
animation-timing-function: cubic-bezier(00.960.560.97);
          }
          
65.5% {
            -
webkit-transformscale(0.6);
                    
transformscale(0.6);
            -
webkit-animation-timing-function: ease-in;
                    
animation-timing-function: ease-in;
          }
          
75% {
            -
webkit-transformscale(0.85);
                    
transformscale(0.85);
            -
webkit-animation-timing-function: cubic-bezier(00.960.560.97);
                    
animation-timing-function: cubic-bezier(00.960.560.97);
            
opacity1;
            
fillnone;
          }
          
100% {
            -
webkit-transformscale(0.6);
                    
transformscale(0.6);
            -
webkit-animation-timing-function: ease-in;
                    
animation-timing-function: ease-in;
            
opacity0;
            
fillwhite;
          }
        }
        @
keyframes pulsate {
          
0% {
            
opacity1;
          }
          
25% {
            -
webkit-transformscale(1);
                    
transformscale(1);
            -
webkit-animation-timing-function: cubic-bezier(00.960.560.97);
                    
animation-timing-function: cubic-bezier(00.960.560.97);
          }
          
28% {
            -
webkit-transformscale(0.6);
                    
transformscale(0.6);
            -
webkit-animation-timing-function: ease-in;
                    
animation-timing-function: ease-in;
          }
          
37.5% {
            -
webkit-transformscale(0.95);
                    
transformscale(0.95);
            -
webkit-animation-timing-function: cubic-bezier(00.960.560.97);
                    
animation-timing-function: cubic-bezier(00.960.560.97);
          }
          
40.5% {
            -
webkit-transformscale(0.6);
                    
transformscale(0.6);
            -
webkit-animation-timing-function: ease-in;
                    
animation-timing-function: ease-in;
          }
          
50% {
            -
webkit-transformscale(0.9);
                    
transformscale(0.9);
            -
webkit-animation-timing-function: cubic-bezier(00.960.560.97);
                    
animation-timing-function: cubic-bezier(00.960.560.97);
          }
          
53% {
            -
webkit-transformscale(0.6);
                    
transformscale(0.6);
            -
webkit-animation-timing-function: ease-in;
                    
animation-timing-function: ease-in;
          }
          
62.5% {
            -
webkit-transformscale(0.85);
                    
transformscale(0.85);
            -
webkit-animation-timing-function: cubic-bezier(00.960.560.97);
                    
animation-timing-function: cubic-bezier(00.960.560.97);
          }
          
65.5% {
            -
webkit-transformscale(0.6);
                    
transformscale(0.6);
            -
webkit-animation-timing-function: ease-in;
                    
animation-timing-function: ease-in;
          }
          
75% {
            -
webkit-transformscale(0.85);
                    
transformscale(0.85);
            -
webkit-animation-timing-function: cubic-bezier(00.960.560.97);
                    
animation-timing-function: cubic-bezier(00.960.560.97);
            
opacity1;
            
fillnone;
          }
          
100% {
            -
webkit-transformscale(0.6);
                    
transformscale(0.6);
            -
webkit-animation-timing-function: ease-in;
                    
animation-timing-function: ease-in;
            
opacity0;
            
fillwhite;
          }
        }
        @-
webkit-keyframes float {
          
0% {
            
opacity0;
          }
          
0.1% {
            -
webkit-transformscale(1);
                    
transformscale(1);
            
opacity0.6;
          }
          
40% {
            -
webkit-transformscale(2);
                    
transformscale(2);
            
opacity0;
          }
          
100% {
            -
webkit-transformscale(1);
                    
transformscale(1);
            
opacity0;
          }
        }
        @
keyframes float {
          
0% {
            
opacity0;
          }
          
0.1% {
            -
webkit-transformscale(1);
                    
transformscale(1);
            
opacity0.6;
          }
          
40% {
            -
webkit-transformscale(2);
                    
transformscale(2);
            
opacity0;
          }
          
100% {
            -
webkit-transformscale(1);
                    
transformscale(1);
            
opacity0;
          }
        }
        @-
webkit-keyframes float2 {
          
0% {
            
opacity0;
          }
          
0.1% {
            -
webkit-transformscale(1);
                    
transformscale(1);
            
opacity0.6;
          }
          
30% {
            -
webkit-transformscale(2);
                    
transformscale(2);
            
opacity0;
          }
          
100% {
            -
webkit-transformscale(1);
                    
transformscale(1);
            
opacity0;
          }
        }
        @
keyframes float2 {
          
0% {
            
opacity0;
          }
          
0.1% {
            -
webkit-transformscale(1);
                    
transformscale(1);
            
opacity0.6;
          }
          
30% {
            -
webkit-transformscale(2);
                    
transformscale(2);
            
opacity0;
          }
          
100% {
            -
webkit-transformscale(1);
                    
transformscale(1);
            
opacity0;
          }
        }
        @-
webkit-keyframes float3 {
          
0% {
            
opacity0;
          }
          
0.1% {
            -
webkit-transformscale(1);
                    
transformscale(1);
            
opacity0.6;
          }
          
30% {
            -
webkit-transformscale(2);
                    
transformscale(2);
            
opacity0;
          }
          
100% {
            -
webkit-transformscale(1);
                    
transformscale(1);
            
opacity0;
          }
        }
        @
keyframes float3 {
          
0% {
            
opacity0;
          }
          
0.1% {
            -
webkit-transformscale(1);
                    
transformscale(1);
            
opacity0.6;
          }
          
30% {
            -
webkit-transformscale(2);
                    
transformscale(2);
            
opacity0;
          }
          
100% {
            -
webkit-transformscale(1);
                    
transformscale(1);
            
opacity0;
          }
        }
        .
spinner {
          
positionrelative;
          
z-index200;
          
width300px;
          
height200px;
          
background#305ae3;
          
margin0 auto;
          
margin-top80px;
          
padding-top50px;
          
padding-left100px;
          
border-radius4px;
          
box-shadow0px 2px 2px 0px rgba(5050500.2);
        }
        .
spinner:after {
          
content"";
          
positionabsolute;
          
z-index300;
          
width300px;
          
height200px;
          
top0;
          
left0;
          
opacity0.3;
          
background-size100%;
        }
    </
style>
</
head>
<
body>
    <
div class="spinner">
      <
svg width="100px" height="100px" viewBox="-26 -26 100 100" class="spinner_svg">
        <
defs></defs>
        <
g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <
g id="Group" transform="translate(2.000000, 2.000000)" stroke="#FFFFFF">
            <
circle id="Oval-1" stroke-width="4" cx="22.5" cy="22.5" r="22.5"></circle>
            <
circle id="Oval-2" cx="22.5" cy="22.5" r="22.5" stroke-width="1.5"></circle>
            <
circle id="Oval-3" cx="22.5" cy="22.5" r="22.5" stroke-width="1.5"></circle>
            <
circle id="Oval-4" cx="22.5" cy="22.5" r="22.5" stroke-width="1.5"></circle>
          </
g>
        </
g>
      </
svg>
    </
div>
</
body>
</
html

 


طراحی چت روم


بازدید : 2884 | تاریخ : دو شنبه 7 / 6 / 1394 ساعت : 4:15 |
نظرات
برای دیدن نظرات بیشتر روی شماره صفحات در زیر کلیک کنید
نام
آدرس ایمیل
وب سایت/بلاگ
:) :( ;) :D
;)) :X :? :P
:* =(( :O };-
:B /:) =DD :S
-) :-(( :-| :-))
نظر خصوصی

 کد را وارد نمایید:

آپلود عکس دلخواه: