Quantcast
Channel: MyBB Community Forums - Tutorials
Viewing all articles
Browse latest Browse all 685

CSS Loading

$
0
0
Hello, Now we have a new tutorial!

Do you remember 1.6? a picture loading for redirect page?

now! in 1.8 no loading for redirect page!

we can add a CSS Loading! #@#@ Smile

Open global.css and add this styles!

Code:
 @keyframes kerio{
   from{transform:rotate(0deg);}
   to{transform:rotate(180deg);}
 }
 @-moz-keyframes kerio{
   from{-moz-transform:rotate(0deg);}
   to{-moz-transform:rotate(180deg);}
 }
 @-o-keyframes kerio{
   from{-o-transform:rotate(0deg);}
   to{-o-transform:rotate(180deg);}
 }
 @-webkit-keyframes kerio{
   from{-webkit-transform:rotate(0deg);}
   to{-webkit-transform:rotate(180deg);}
 }
 @-ms-keyframes kerio{
   from{-ms-transform:rotate(0deg);}
   to{-ms-transform:rotate(180deg);}
 }
 .kerLoading{
   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-top:none;
   border-bottom:none;
   border-right-color:#036;
   border-left-color:#036;
   margin:0 auto;
   animation:moisrex .5s infinite linear;
   -moz-animation:moisrex .5s infinite linear;
   -o-animation:moisrex .5s infinite linear;
   -webkit-animation:moisrex .5s infinite linear;
   -ms-animation:moisrex .5s infinite linear;
 }

open redirect from non-grouped templates!

change every codes to this codes!
PHP Code:
<html>
<
head>
<
title>{$title}</title>
<
meta http-equiv="refresh" content="2;URL={$url}/>
{
$headerinclude}
</
head>
<
body>
<
br />
<
br />
<
br />
<
br />
<
div style="margin: auto auto; width: {$lang->redirect_width}align="center">
<
table border="0" cellspacing="{$theme['borderwidth']}cellpadding="{$theme['tablespace']}class="tborder">
<
tr>
<
td class="thead"><strong><img src="/images/logo.png"></strong></td>
</
tr>
<
tr>
<
td class="trow1" align="center"><div class="kerLoading"></div></td>
</
tr>
<
tr>
<
td class="trow1" align="center"><p>{$message}</p></td>
</
tr>
<
tr>
<
td class="trow2" align="left"><a href="{$url}"><span class="smalltext">{$lang->click_no_wait}</span></a></td>
</
tr>
</
table>
</
div>
</
body>
</
html

Enjoy!  Heart

Quote:you can use in everywhere ! just add <div class="kerLoading"> !

Viewing all articles
Browse latest Browse all 685

Trending Articles