Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Board Index » Forumotion » Tutorials  »  [OLD] Tutorials & Codes »[Javascript] Green IPB Ajax loading

Foto

[Javascript] Green IPB Ajax loading

by ,


View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Shadow

Shadow
Administrator
Administrator
2013-10-08, 22:03

[Javascript] Green IPB Ajax loading Images10
Green Ajax loading

When you enter on IPBOARD forum, you see a top loading screen? Today you will learn will put this effect in your forum!


--> Tutorials, tips and tricks <--
Green Ajax loading


1º - Javascript
Code:
[panda=js]        jQuery(function() {
              jQuery('body').prepend('<div id="ajax_loading" style=""><img src="http://i58.servimg.com/u/f58/17/89/00/23/ajax_l10.gif" alt="Loading..."></div>');
              jQuery('a').click(function() {
                  jQuery('#ajax_loading').slideDown();
                  setTimeout('load()', 1000);
              });
            });
            function load() {
              jQuery('#ajax_loading').slideUp('1000');
            }
            setTimeout('load()', 1000);
2º - CSS
Code:
[panda=css]        #ajax_loading {
            background: url("http://i58.servimg.com/u/f58/17/89/00/23/ajaxlo10.png") repeat-x scroll 0px 0px transparent;
            border: 1px solid rgb(123, 166, 13);
            border-radius: 0px 0px 5px 5px;
            box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.2) inset;
            color: rgb(255, 255, 255);
            left: 46%;
            padding: 5px 0px 8px;
            position: fixed;
            text-align: center;
            top: 0px;
            width: 8%;
            z-index: 999;
        }
3º - Preview
[Javascript] Green IPB Ajax loading GpFYwJw




© PunBB Design


[Javascript] Green IPB Ajax loading Act_bottom If you have any questions related to this topic create a topic with the following title:
Green Ajax loading

Powered by PunBB
Thanks
Currently 0 users have thanked Shadow for this post:

2
Offline

  Zyon

Zyon
Punbb Guru
Punbb Guru
2013-10-10, 15:29
Thanks, this is grate tutorial!

Powered by PunBB
Currently 0 users have thanked Zyon for this post:

3
Offline

  Michael_vx

Michael_vx
Punbb Junior
Punbb Junior
2014-04-07, 13:33
thank you so much works good

Powered by PunBB
Currently 0 users have thanked Michael_vx for this post:

4
Offline

  J0k3R^

J0k3R^
Pemanently Banned
Pemanently Banned
2014-04-15, 08:07
very nice
and works fine on my forum.
thank u Smile

Powered by PunBB
Thanks
Currently 0 users have thanked J0k3R^ for this post:

5
Offline

  MoiLulu

MoiLulu
Punbb Rookie
Punbb Rookie
2014-06-07, 03:49
Worked well, thank-you for this.

Powered by PunBB
Currently 0 users have thanked MoiLulu for this post:

6
Offline

  FrOsTyXi

FrOsTyXi
V.I.P. Member
V.I.P. Member
2015-01-06, 01:57
Hello, just an addition to this cool feature. I tweaked mine a bit, so it's a black Ajax loading. Same as above no different besides color.

JavaScript
Code:
jQuery(function() {
              jQuery('body').prepend('<div id="ajax_loading" style=""><img src="http://i38.servimg.com/u/f38/18/83/30/50/ajax-l10.gif" alt="Loading..."></div>');
              jQuery('a').click(function() {
                  jQuery('#ajax_loading').slideDown();
                  setTimeout('load()', 1000);
              });
            });
            function load() {
              jQuery('#ajax_loading').slideUp('1000');
            }
            setTimeout('load()', 1000);

CSS
Code:
#ajax_loading {
            background: url("http://i38.servimg.com/u/f38/18/83/30/50/imagee15.png") repeat-x scroll 0px 0px transparent;
            border: 1px solid #000000;
            border-radius: 0px 0px 5px 5px;
            box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.2) inset;
            color: rgb(255, 255, 255);
            left: 46%;
            padding: 5px 0px 8px;
            position: fixed;
            text-align: center;
            top: 0px;
            width: 8%;
            z-index: 999;
        }

Preview
[Javascript] Green IPB Ajax loading Previe10

Enjoy!

Powered by PunBB
Thanks
Currently 0 users have thanked FrOsTyXi for this post:

7
Offline

  Andrei34

Andrei34
Punbb Rookie
Punbb Rookie
2016-05-19, 16:32
very good tuto thx

Powered by PunBB
Currently 0 users have thanked Andrei34 for this post:

8
Offline

  Sponsored content



Powered by PunBB
Currently 0 users have thanked Sponsored content for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum

 

About PunBB Design

PunBB Design (ex. PunBB Community) Forum is Forumotion hosted forum created 2012 as a test forum for helping out members and improving design and quality of the Forumotion forums. Over the time it became bigger and bigger in term of content, members and activity. That's why several times Forumotion offered us a free domain name for our community (www.punbb.biz). Today we want to back it's old activity and make it even better! In 2013 PunBB Design is awarded for best Forumotion forum.

General Links

Forum Resources

Forumotion Links

BtT
  • This skin is designed by Shadow for PunBB Design™.