gix075 / jqueryintroloader Goto Github PK

View Code? Open in Web Editor NEW

48.0 48.0 24.0 142 KB

a jQuery plugin for generate animated Intro Loading Pages

License: GNU General Public License v3.0

jqueryintroloader's People

Contributors

Stargazers

Watchers

jqueryintroloader's Issues

Custom spinner

Hi, great script, thank you for sharing!

I would like to use an SVG as spinner, is that possible? I tried to put it into div#element, via html and also via jQuery by using your callbacks as well, but I realized that any element is removed from it. Any advice?

TIA, Manuel :-)

not Working in IE :

Unable to get property 'stop' of undefined or null reference

White Screen with firefox add on "no script"

great loader, but when using firefox add-on noscript I have a white page. No content is displayed.

thanks for more information, margoux

Trying to stop inside an Ajax call.

Hi there, loves this plugin, but need a little help.

I have div set to using the name: simplerLoader. I've set the stop: false, and fixed: false. When my Ajax call has finished calling out to the DB, I kill the loader using loader.stop();

All work, expect when I set fixed to false, then the loader doesnt show, and my whole sit has gone. If I remove fixed:false, then the loader works, but I can't stop it.

$('#btnSearchAPI').click(function () {
$("#modalLoader").introLoader({
animation:
{
name: 'simplerLoader',
options: {
exitFX: 'slideUp',
ease: 'easeInOutCirc',
style: 'dark',
stop: false,
fixed: false
},
spinJs: {
lines: 10,
length: 10,
radius: 30,
width: 8,
color: '#fff'
}
}
});
});

Stop at custom time

Not really an issue but more a modification. Is there a way to overwrite the delayTime dynamically. For example I'm running some ajax in the background and when that has finished processing I want to remove loader, but not until.

Thanks

Spin Now working with Mootools

Hi,

My console says this error
(intermediate value).spin is not a function

On this below line
plugin.spinner = new Spinner(spinOpt).spin();

So how i can resolve this error. Can i get email for this solution.

getting spinner is not defined

not work wit jquery 3.2.1?

work just with first load page : /

I have an issue with this plugin, [ " ISSUE FIXED, EVERYTHING WORKS PERFECTLY " ] :) !

For example i want to test it on my Login/Register index.php page :

It just wont work and i have checked online documentation...i have tried git hub solutions...i have tried copying direct demo files to use with my page...nothing works...also tried:

Javascript

$(document).on('ready' , function() {
$("#element").introLoader();
});

. This is by far most time consuming simple thing i couldn't get to work at all...

ERROR => I get white screen or it simply wont show anything

<title>Prijava / Registracija</title>

    <!-- PRELOADER PLUGIN DODATKI ----------------------------------------------------------------- -->
    <link href="preloader/css/introLoader.min.css" rel="stylesheet">
    <!-- PLUGIN (with helper plugins included) -->
    <script src="preloader/jquery.introLoader.pack.min.js"></script>

    <!-- PRELOADER PLUGIN DODATKI KONEC -------------------------------------------------------- -->

    <!-- PRELOADER <div> KLIC -->
    
    <div id="element"></div>
    
    <script>
        
            $(document).ready( function() {
                    $("#element").introLoader({
                                
                animation: {
                    name: 'doubleLoader',
                    options: {
                        onBefore: function() {$("#element").addClass('introLoading');}
                    }
                },
                        exitFx:'fadeOut',
                        ease: "easeInOutCirc",
                        style: 'ocean zebra',
                        delayBefore: 500,
                        exitTime: 300,
                        progbarTime: 700,
                        progbarDelayAfter: 400,
                        preventScroll: true
                    });
                
            });
		
	</script>

    <!-- PRELOADER <div> KLIC -->

    
<!-- FORM za PRIJAVA / REGISTRACIJA -->
<div class="form">

	<!-- zavihek PRIJAVA / REGISTRACIJA -->
	<ul class="tab-group">
		<li class="tab"><a href="#signup">Registracija</a></li>
		<li class="tab active"><a href="#login">Prijava</a></li>
	</ul>
	
	<!-- zavihek PRIJAVA / REGISTRACIJA -->
	<div class="tab-content">
	
		<!-- zavihek PRIJAVA -->
		<div id="login">   
                                                            <h1>Dobrodošli nazaj!</h1>
                                                            <form><br>
                                                            <div class="content">
                                                            <div class="content__container">
                                                                <p class="content__container__text">
                                                                    Pozdravljeni
                                                                </p>

                                                              <ul class="content__container__list">
                                                                <li class="content__container__list__item">Popotniki !</li>
                                                                <li class="content__container__list__item">Alpinisti !</li>
                                                                <li class="content__container__list__item">Pohodniki !</li>
                                                                <li class="content__container__list__item">Izletniki !</li>
                                                              </ul>
                                                            </div>
                                                          </div>   
                                                    </form>
                                                            <form action="index.php" method="post" autocomplete="off"><br><br>
				<div class="field-wrap">
					<label>E-poštni naslov<span class="req">*</span></label>
					<input type="email" required autocomplete="off" name="email"/>
				</div>
				
				<div class="field-wrap">
					<label>Geslo<span class="req">*</span></label>
					<input type="password" required autocomplete="off" name="geslo"/>
				</div>
			
				<p class="forgot"><a href="forgot.php">Ste pozabili geslo?</a></p>
				
				<button class="button button-block" name="login" />Prijava</button>
			</form>
		</div>

		
		<!-- zavihek REGISTRACIJA -->
		<div id="signup">   
			<h1>Registracija</h1>
                            
                            <!-- CUSTOM Animiran text POZDRAV -->
			<form><br>
                                                            <div class="content">
                                                            <div class="content__container">
                                                              <p class="content__container__text">
                                                                Pozdravljeni
                                                              </p>

                                                              <ul class="content__container__list">
                                                                <li class="content__container__list__item">Popotniki !</li>
                                                                <li class="content__container__list__item">Alpinisti !</li>
                                                                <li class="content__container__list__item">Pohodniki !</li>
                                                                <li class="content__container__list__item">Izletniki !</li>
                                                              </ul>
                                                            </div>
                                                          </div>   
                                                    </form>
                            
                            <!-- CUSTOM Animiran text POZDRAV -->
                            
                                                                    <form action="index.php" method="post" autocomplete="off"><br><br>
				<div class="top-row">
					<div class="field-wrap">
						<label>Ime<span class="req">*</span></label>
						<input type="text" required autocomplete="off" name='ime' />
					</div>
					
					<div class="field-wrap">
						<label>Priimek<span class="req">*</span></label>
						<input type="text"required autocomplete="off" name='priimek' />
					</div>
				</div>
				
				<div class="field-wrap">
					<label>E-poštni naslov<span class="req">*</span></label>
					<input type="email"required autocomplete="off" name='email' />
				</div>

				<div class="field-wrap">
					<label>Nastavi geslo<span class="req">*</span></label>
					<input type="password"required autocomplete="off" name='geslo'/>
				</div>

				<button type="submit" class="button button-block" name="register" />Registracija</button>
			</form>
		</div>
	</div> <!-- konec zavihek PRIJAVA / REGISTRACIJA -->
	
	<!-- gumb PORTAL -->
	<br> <hr> <br>	
	<a href="popotnik.php"><button class="button button-block" name="portal"/>Portal</button></a>
	
</div> <!-- FORM za PRIJAVA / REGISTRACIJA -->

<!-- JavaScript za FORM-o -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.