1. 程式人生 > >ajax進行非同步請求資料新增loading效果

ajax進行非同步請求資料新增loading效果

複製程式碼
#fountainG{
position:relative;
margin:10% auto;
width:240px;
height:29px}

.fountainG{
position:absolute;
top:0;
background-color:#33cc99;
width:29px;
height:29px;
-webkit-animation:bounce_fountainG 1.3s infinite normal;
-moz-animation:bounce_fountainG 1.3s infinite normal;
-o-animation:bounce_fountainG 1.3s infinite normal
; -ms-animation:bounce_fountainG 1.3s infinite normal; animation:bounce_fountainG 1.3s infinite normal; -moz-transform:scale(.3); -webkit-transform:scale(.3); -ms-transform:scale(.3); -o-transform:scale(.3); transform:scale(.3); border-radius:19px; } #fountainG_1{ left:0; -moz-animation-delay:0.52s; -webkit-animation-delay
:0.52s; -ms-animation-delay:0.52s; -o-animation-delay:0.52s; animation-delay:0.52s; } #fountainG_2{ left:30px; -moz-animation-delay:0.65s; -webkit-animation-delay:0.65s; -ms-animation-delay:0.65s; -o-animation-delay:0.65s; animation-delay:0.65s; } #fountainG_3{ left:60px; -moz-animation-delay:0.78s; -webkit-animation-delay
:0.78s; -ms-animation-delay:0.78s; -o-animation-delay:0.78s; animation-delay:0.78s; } #fountainG_4{ left:90px; -moz-animation-delay:0.91s; -webkit-animation-delay:0.91s; -ms-animation-delay:0.91s; -o-animation-delay:0.91s; animation-delay:0.91s; } #fountainG_5{ left:120px; -moz-animation-delay:1.04s; -webkit-animation-delay:1.04s; -ms-animation-delay:1.04s; -o-animation-delay:1.04s; animation-delay:1.04s; } #fountainG_6{ left:150px; -moz-animation-delay:1.17s; -webkit-animation-delay:1.17s; -ms-animation-delay:1.17s; -o-animation-delay:1.17s; animation-delay:1.17s; } #fountainG_7{ left:180px; -moz-animation-delay:1.3s; -webkit-animation-delay:1.3s; -ms-animation-delay:1.3s; -o-animation-delay:1.3s; animation-delay:1.3s; } #fountainG_8{ left:210px; -moz-animation-delay:1.43s; -webkit-animation-delay:1.43s; -ms-animation-delay:1.43s; -o-animation-delay:1.43s; animation-delay:1.43s; } @-moz-keyframes bounce_fountainG{ 0%{ -moz-transform:scale(1); background-color:#33cc99; } 100%{ -moz-transform:scale(.3); background-color:#0099cc; } } @-webkit-keyframes bounce_fountainG{ 0%{ -webkit-transform:scale(1); background-color:#33cc99; } 100%{ -webkit-transform:scale(.3); background-color:#0099cc; } } @-ms-keyframes bounce_fountainG{ 0%{ -ms-transform:scale(1); background-color:#33cc99; } 100%{ -ms-transform:scale(.3); background-color:#0099cc; } } @-o-keyframes bounce_fountainG{ 0%{ -o-transform:scale(1); background-color:#33cc99; } 100%{ -o-transform:scale(.3); background-color:#0099cc; } } @keyframes bounce_fountainG{ 0%{ transform:scale(1); background-color:#33cc99; } 100%{ transform:scale(.3); background-color:#0099cc; } }
複製程式碼