If the checkbox is not check and if the button is clicked then the shake effect is added to the checkbox div, but it doesn't work every time the button is clicked. How to make it so that it happen on every button click if the checkbox is not checked. classList.add only adds the class once so I used toggle.
JsFiddle.
<style>
.face {
animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
</style>
</style>
<body>
<br>
<br>
<div id="termsdiv">
<input type="checkbox" id="terms">Terms
</div>
<div id="privacydiv">
<input type="checkbox" id="privacy">Privacy
</div>
<br>
<a id='googlebtn' onclick='return func();' type='submit' href="http://google.com"><img src="https://staging-4.dispatchhealth.com/icons/btn_sign_in_google.png"></a>
</body>
<script>
function func() {
var termsCheckbox = document.getElementById("terms");
var termsdiv = document.getElementById("termsdiv");
var privacyCheckbox = document.getElementById("privacy");
var privacydiv = document.getElementById("privacydiv");
if (termsCheckbox.checked == false) {
termsdiv.classList.toggle("face");
// alert("You must agree to the terms");
return false;
}
if (privacyCheckbox.checked == false) {
privacydiv.classList.toggle("face");
// alert("You must agree to the privacy");
return false;
}
}
</script>
There were two issues:
You're returned false in case of first checkbox isn't checked. The second checkbox wasn't checked in this case. You have to return at the end.
toggle added the class on first click an removed it on second click. Now i add the class and remove it after 820ms on click.
function func() {
var termsCheckbox = document.getElementById("terms");
var termsdiv = document.getElementById("termsdiv");
var privacyCheckbox = document.getElementById("privacy");
var privacydiv = document.getElementById("privacydiv");
var bReturnValue;
if (termsCheckbox.checked === false) {
termsdiv.classList.add("face"); //Add Class
setTimeout(function(){
termsdiv.classList.remove("face"); //Remove Class after 820ms
},820);
bReturnValue = false; //Store return value in variabel
}
if (privacyCheckbox.checked === false) {
privacydiv.classList.add("face");
setTimeout(function(){
privacydiv.classList.remove("face");
},820);
bReturnValue = false;
}
return bReturnValue; //Return return value
}
.face {
animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
<br>
<br>
<div id="termsdiv">
<input type="checkbox" id="terms">Terms
</div>
<div id="privacydiv">
<input type="checkbox" id="privacy">Privacy
</div>
<br>
<a id='googlebtn' onclick='return func();' type='submit' href="http://google.com"><img src="http://lorempixel.com/300/100/"></a>
How toggle works -->
When you click the button it is adding 'face' class to checkbox div individually which makes it shake.
When you click button again it removes the 'face' class from checkbox div which does no action.
So place a set timeout to remove the 'face' class just after adding the class, make the timeout <= shake time (which is 820 ms here)
Please check the working copy here:
https://github.com/helloritesh000/how-to-make-this-class-to-add-on-every-click
if (termsCheckbox.checked == false) {
termsdiv.classList.add("face");
setTimeout(function(){ console.log("function func1212"); termsdiv.classList.remove("face"); }, 800);
// alert("You must agree to the terms");
return false;
}
if(privacyCheckbox.checked == false) {
privacydiv.classList.add("face");
setTimeout(function(){ privacydiv.classList.remove("face"); }, 800);
// alert("You must agree to the privacy");
return false;
}
Hello guys it's been bugging me all night. I've been trying to get together a word rotate feature that decreases in speed and then eventually stops. Think of it like a word roulette. So i have the words stored in an array and it looks over the words and displays them. Now, i need to decelerate the speed and slowly make it stop and a random lettter, how would i go about this ?
<?php
$json=file_get_contents('http://ddragon.leagueoflegends.com/cdn/5.18.1/data/en_US/champion.json');
$champions = json_decode($json);
?>
<?php
$championsArray = array();
foreach($champions->data as $champion){
$championsArray[] = $champion->id;
}
shuffle($championsArray);
$speed = 1000;
$count = count($championsArray);
var_dump($championsArray);
?>
<!DOCTYPE html>
<html lang="en" class="demo1 no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Super Simple Text Rotator Demo 1: Default Settings</title>
<meta name="description" content="Rotating text is a very simple idea where you can add more content to a text area without consuming much space by rotating an individual word with a collection of others" />
<meta name="keywords" content="jquery text rotator, css text rotator, rotate text, inline text rotator" />
<meta name="author" content="Author for Onextrapixel" />
<link rel="shortcut icon" href="../file/favicon.gif">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<!-- Edit Below -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="jquery.wordrotator.css">
<script src="jquery.wordrotator.js"></script>
</head>
<body class="demo1">
<div class="container">
<p><span id="myWords"></span></p>
<div class="main">
Go!
</div>
</div><!-- Container -->
<script type="text/javascript">
function eventFire(el, etype){
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
function erm() {
var cont = $("#myWords");
$(function () {
$("#myWords").wordsrotator({
randomize: true,
stopOnHover: true, //stop animation on hover
words: ['Heimerdinger','Ezreal','Skarner','Nunu','Kennen','Lulu','Morgana','Sejuani','Draven','Nocturne','KogMaw','Jinx','Khazix','Cassiopeia','Fiora','Maokai','Zac','Quinn','Vladimir','RekSai','LeeSin','TwistedFate','MissFortune','Shaco','Vayne','Sivir','Urgot','Nautilus','Annie','Fizz','Janna','Irelia','Karthus','Trundle','Jax','Graves','Leona','Rengar','Amumu','Malzahar','TahmKench','MasterYi','Twitch','Rumble','Nidalee','Shyvana','Veigar','Singed','Riven','Leblanc','Katarina','Azir','Viktor','Poppy','Ahri','Yorick','Aatrox','Brand','Tryndamere','DrMundo','Hecarim','Braum','Nasus','Pantheon','Elise','Velkoz','Swain','Darius','Kayle','Thresh','Nami','Ekko','Alistar','Galio','Warwick','Orianna','Sona','Lux','Ryze','Jayce','Kassadin','Volibear','Blitzcrank','Gangplank','Karma','XinZhao','Ziggs','Malphite','Tristana','Soraka','Anivia','Xerath','Renekton','Shen','Lissandra','Ashe','Mordekaiser','Talon','Zilean','JarvanIV','Rammus','Yasuo','Vi','Bard','Sion','Udyr','MonkeyKing','Akali','Diana','Varus','Kalista','Evelynn','Teemo','Gnar','Garen','Taric','FiddleSticks','Chogath','Zed','Lucian','Caitlyn','Corki','Zyra','Syndra','Gragas','Olaf']
});
});
eventFire(document.getElementById('myWords'), 'click');
}
</script>
</body>
</html>
Can anyone figure out a solution for this?
You could modify a bit the wordrotator plugin so that it allows to change the speed on each rotate.
You'll have to tweak the animation and the speed increment, but this should give you some ideas:
(function ($) {
$.fn.wordsrotator = function (options) {
var defaults = {
autoLoop: true,
randomize: false,
stopOnHover: false,
changeOnClick: false,
words: null,
animationIn: "flipInY",
animationOut: "flipOutY",
speed: 40,
onRotate: function () {},//you add these 2 methods to allow the effetct
stopRotate: function () {}
};
var settings = $.extend({}, defaults, options);
var listItem
var array_bak = [];
var stopped = false;
settings.stopRotate = function () {//you call this one to stop rotate
stopped = true;
}
return this.each(function () {
var el = $(this)
var cont = $("#" + el.attr("id"));
var array = [];
//if array is not empty
if ((settings.words) || (settings.words instanceof Array)) {
array = $.extend(true, [], settings.words);
//In random order, need a copy of array
if (settings.randomize) array_bak = $.extend(true, [], array);
listItem = 0
//if randomize pick a random value for the list item
if (settings.randomize) listItem = Math.floor(Math.random() * array.length)
//init value into container
cont.html(array[listItem]);
// animation option
var rotate = function () {
cont.html("<span class='wordsrotator_wordOut'><span>" + array[listItem] + "</span></span>");
if (settings.randomize) {
//remove printed element from array
array.splice(listItem, 1);
//refill the array from his copy, if empty
if (array.length == 0) array = $.extend(true, [], array_bak);
//generate new random number
listItem = Math.floor(Math.random() * array.length);
} else {
//if reached the last element of the array, reset the index
if (array.length == listItem + 1) listItem = -1;
//move to the next element
listItem++;
}
$("<span class='wordsrotator_wordIn'>" + array[listItem] + "</span>").appendTo(cont);
cont.wrapInner("<span class='wordsrotator_words' />");
cont.find(".wordsrotator_wordOut").addClass("animated " + settings.animationOut);
cont.find(".wordsrotator_wordIn").addClass("animated " + settings.animationIn);
settings.onRotate();//this callback will allow to change the speed
if (settings.autoLoop && !stopped) {
//using timeout instead of interval will allow to change the speed
t = setTimeout(function () {
rotate()
}, settings.speed, function () {
rotate()
});
if (settings.stopOnHover) {
cont.hover(function () {
window.clearTimeout(t)
}, function () {
t = setTimeout(rotate, settings.speed, rotate);
});
};
}
};
t = setTimeout(function () {
rotate()
}, settings.speed, function () {
rotate()
})
cont.on("click", function () {
if (settings.changeOnClick) {
rotate();
return false;
};
});
};
});
}
}(jQuery));
function eventFire(el, etype) {
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
function erm() {
var cont = $("#myWords");
$(function () {
$("#myWords").wordsrotator({
animationIn: "fadeOutIn", //css class for entrace animation
animationOut: "fadeOutDown", //css class for exit animation
randomize: true,
stopOnHover: true, //stop animation on hover
words: ['Heimerdinger', 'Ezreal', 'Skarner', 'Nunu', 'Kennen', 'Lulu', 'Morgana', 'Sejuani', 'Draven', 'Nocturne', 'KogMaw', 'Jinx', 'Khazix', 'Cassiopeia', 'Fiora', 'Maokai', 'Zac', 'Quinn', 'Vladimir', 'RekSai', 'LeeSin', 'TwistedFate', 'MissFortune', 'Shaco', 'Vayne', 'Sivir', 'Urgot', 'Nautilus', 'Annie', 'Fizz', 'Janna', 'Irelia', 'Karthus', 'Trundle', 'Jax', 'Graves', 'Leona', 'Rengar', 'Amumu', 'Malzahar', 'TahmKench', 'MasterYi', 'Twitch', 'Rumble', 'Nidalee', 'Shyvana', 'Veigar', 'Singed', 'Riven', 'Leblanc', 'Katarina', 'Azir', 'Viktor', 'Poppy', 'Ahri', 'Yorick', 'Aatrox', 'Brand', 'Tryndamere', 'DrMundo', 'Hecarim', 'Braum', 'Nasus', 'Pantheon', 'Elise', 'Velkoz', 'Swain', 'Darius', 'Kayle', 'Thresh', 'Nami', 'Ekko', 'Alistar', 'Galio', 'Warwick', 'Orianna', 'Sona', 'Lux', 'Ryze', 'Jayce', 'Kassadin', 'Volibear', 'Blitzcrank', 'Gangplank', 'Karma', 'XinZhao', 'Ziggs', 'Malphite', 'Tristana', 'Soraka', 'Anivia', 'Xerath', 'Renekton', 'Shen', 'Lissandra', 'Ashe', 'Mordekaiser', 'Talon', 'Zilean', 'JarvanIV', 'Rammus', 'Yasuo', 'Vi', 'Bard', 'Sion', 'Udyr', 'MonkeyKing', 'Akali', 'Diana', 'Varus', 'Kalista', 'Evelynn', 'Teemo', 'Gnar', 'Garen', 'Taric', 'FiddleSticks', 'Chogath', 'Zed', 'Lucian', 'Caitlyn', 'Corki', 'Zyra', 'Syndra', 'Gragas', 'Olaf'],
onRotate: function () {
//on each rotate you make the timeout longer, until it's slow enough
if (this.speed < 600) {
this.speed += 20;
} else {
this.stopRotate();
}
}
});
});
eventFire(document.getElementById('myWords'), 'click');
}
#charset"utf-8";
.wordsrotator_words {
display: inline-block;
position: relative;
white-space:nowrap;
-webkit-transition: width 100ms;
-moz-transition: width 100ms;
-o-transition: width 100ms;
transition: width 100ms;
}
.wordsrotator_words .wordsrotator_wordOut, .wordsrotator_words .wordsrotator_wordIn {
position: relative;
display: inline-block;
-webkit-animation-duration: 50ms;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: 50ms;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-ms-animation-duration: 50ms;
-ms-animation-timing-function: ease;
-ms-animation-fill-mode: both;
}
.wordsrotator_words .wordsrotator_wordOut {
left: 0;
top: 0;
position: absolute;
display: inline-block;
}
.wordsrotator_words .wordsrotator_wordOut span {
width: auto;
position: relative;
}
.wordsrotator_words .wordsrotator_wordIn {
opacity: 0;
}
#-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
#-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 1;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
#keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 1;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
<p><span id="myWords"></span>
</p>
<div class="main"> Go!
</div>
</div>
I am working on a image slider and here is my code so far:
angular
.module('myApp', [])
.controller("imageController", ['$scope', function ($scope) {
var imageArray = [ // dynamic array
'http://s3.amazonaws.com/theoatmeal-img/thumbnails/random_comics.png',
'http://images5.fanpop.com/image/photos/30200000/-random-30240825-200-200.gif',
'https://cdn.tutsplus.com/active/uploads/legacy/tuts/059_QTRandom/Preview/Preview.png'
];
var index = 0; // so as to have the first image displayed when the page is loaded
$scope.showAjaxLoader = true; // show
$scope.url = imageArray[index];
$scope.showAjaxLoader = false; // hide
if(imageArray.length > 0){
$scope.showNext = true;
}
$scope.getPrev = function(){
$scope.showAjaxLoader = true; // show
index--;
$scope.url = imageArray[index];
if(index === 0){
$scope.showPrev = false;
}
$scope.showNext = true;
$scope.showAjaxLoader = false; // hide
};
$scope.getNext = function(){
$scope.showAjaxLoader = true; // show
index++;
$scope.url = imageArray[index];
if(index === imageArray.length-1){
$scope.showNext = false;
}
$scope.showPrev = true;
$scope.showAjaxLoader = false; // hide
};
}]);
img{
width: 100%;
}
button{
position: fixed;
top: calc(50% - 17px);
font-size: 25px;
}
#previous{
left: 0px;
}
#next{
right: 0px;
}
/* AJAX loader */
#circularG{
position:relative;
width:58px;
height:58px;
margin: auto;
}
.circularG{
position:absolute;
background-color:rgb(0,0,0);
width:14px;
height:14px;
border-radius:9px;
-o-border-radius:9px;
-ms-border-radius:9px;
-webkit-border-radius:9px;
-moz-border-radius:9px;
animation-name:bounce_circularG;
-o-animation-name:bounce_circularG;
-ms-animation-name:bounce_circularG;
-webkit-animation-name:bounce_circularG;
-moz-animation-name:bounce_circularG;
animation-duration:1.1s;
-o-animation-duration:1.1s;
-ms-animation-duration:1.1s;
-webkit-animation-duration:1.1s;
-moz-animation-duration:1.1s;
animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
animation-direction:normal;
-o-animation-direction:normal;
-ms-animation-direction:normal;
-webkit-animation-direction:normal;
-moz-animation-direction:normal;
}
#circularG_1{
left:0;
top:23px;
animation-delay:0.41s;
-o-animation-delay:0.41s;
-ms-animation-delay:0.41s;
-webkit-animation-delay:0.41s;
-moz-animation-delay:0.41s;
}
#circularG_2{
left:6px;
top:6px;
animation-delay:0.55s;
-o-animation-delay:0.55s;
-ms-animation-delay:0.55s;
-webkit-animation-delay:0.55s;
-moz-animation-delay:0.55s;
}
#circularG_3{
top:0;
left:23px;
animation-delay:0.69s;
-o-animation-delay:0.69s;
-ms-animation-delay:0.69s;
-webkit-animation-delay:0.69s;
-moz-animation-delay:0.69s;
}
#circularG_4{
right:6px;
top:6px;
animation-delay:0.83s;
-o-animation-delay:0.83s;
-ms-animation-delay:0.83s;
-webkit-animation-delay:0.83s;
-moz-animation-delay:0.83s;
}
#circularG_5{
right:0;
top:23px;
animation-delay:0.97s;
-o-animation-delay:0.97s;
-ms-animation-delay:0.97s;
-webkit-animation-delay:0.97s;
-moz-animation-delay:0.97s;
}
#circularG_6{
right:6px;
bottom:6px;
animation-delay:1.1s;
-o-animation-delay:1.1s;
-ms-animation-delay:1.1s;
-webkit-animation-delay:1.1s;
-moz-animation-delay:1.1s;
}
#circularG_7{
left:23px;
bottom:0;
animation-delay:1.24s;
-o-animation-delay:1.24s;
-ms-animation-delay:1.24s;
-webkit-animation-delay:1.24s;
-moz-animation-delay:1.24s;
}
#circularG_8{
left:6px;
bottom:6px;
animation-delay:1.38s;
-o-animation-delay:1.38s;
-ms-animation-delay:1.38s;
-webkit-animation-delay:1.38s;
-moz-animation-delay:1.38s;
}
#keyframes bounce_circularG{
0%{
transform:scale(1);
}
100%{
transform:scale(.3);
}
}
#-o-keyframes bounce_circularG{
0%{
-o-transform:scale(1);
}
100%{
-o-transform:scale(.3);
}
}
#-ms-keyframes bounce_circularG{
0%{
-ms-transform:scale(1);
}
100%{
-ms-transform:scale(.3);
}
}
#-webkit-keyframes bounce_circularG{
0%{
-webkit-transform:scale(1);
}
100%{
-webkit-transform:scale(.3);
}
}
#-moz-keyframes bounce_circularG{
0%{
-moz-transform:scale(1);
}
100%{
-moz-transform:scale(.3);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="imageController">
<!-- AJAX loader -->
<div id="circularG" ng-show='showAjaxLoader'>
<div id="circularG_1" class="circularG"></div>
<div id="circularG_2" class="circularG"></div>
<div id="circularG_3" class="circularG"></div>
<div id="circularG_4" class="circularG"></div>
<div id="circularG_5" class="circularG"></div>
<div id="circularG_6" class="circularG"></div>
<div id="circularG_7" class="circularG"></div>
<div id="circularG_8" class="circularG"></div>
</div>
<!-- Next/Previous buttons -->
<button id='previous' ng-click='getPrev()' ng-init='showPrev=false' ng-show='showPrev'>Prev</button>
<button id='next' ng-click='getNext()' ng-show='showNext'>Next</button>
<!-- image -->
<img src={{url}} />
</div>
</body>
It works fine, except the fact that the AJAX loader is not displayed while the other image is being loaded completely. The problem is that it gets hidden immediately when I set the ng-show to false.
How do I make it to work so that it is shown while the image is being fetched or completely loaded on the webpage?
Whenever an image url changes, a new javascript image object is created, and the image onload event is used to cancel the ajax loader.
Note that after an image was loaded, it is cached by the browser, so the ajax loader will usually appear once for every image. To see the ajax loader again, you'll have to clean the cache.
angular
.module('myApp', [])
.controller("imageController", ['$scope', function ($scope) {
var imageArray = [ // dynamic array
'http://s3.amazonaws.com/theoatmeal-img/thumbnails/random_comics.png',
'http://images5.fanpop.com/image/photos/30200000/-random-30240825-200-200.gif',
'https://cdn.tutsplus.com/active/uploads/legacy/tuts/059_QTRandom/Preview/Preview.png'
];
var index = 0; // so as to have the first image displayed when the page is loaded
showImage(imageArray[index]);
function showImage(url) {
$scope.showAjaxLoader = true; // show
var img = new Image(); // create a new image
img.onload = function () { // create an image onload event handler
$scope.$apply(function () { // don't forget to apply as the event is out of angular digest cycle
$scope.showAjaxLoader = false; // hide when image is loaded
});
};
$scope.url = url;
img.src = url; // assign url to image
}
if (imageArray.length > 0) {
$scope.showNext = true;
}
$scope.getPrev = function () {
index--;
showImage(imageArray[index]);
if (index === 0) {
$scope.showPrev = false;
}
$scope.showNext = true;
};
$scope.getNext = function () {
index++;
showImage(imageArray[index]);
if (index === imageArray.length - 1) {
$scope.showNext = false;
}
$scope.showPrev = true;
};
}
]);
img{
width: 100%;
}
button{
position: fixed;
top: calc(50% - 17px);
font-size: 25px;
}
#previous{
left: 0px;
}
#next{
right: 0px;
}
/* AJAX loader */
#circularG{
position: fixed;
width:58px;
height:58px;
margin: auto;
top: 100px;
left: calc(50% - 29px);
}
.circularG{
position:absolute;
background-color:rgb(0,0,0);
width:14px;
height:14px;
border-radius:9px;
-o-border-radius:9px;
-ms-border-radius:9px;
-webkit-border-radius:9px;
-moz-border-radius:9px;
animation-name:bounce_circularG;
-o-animation-name:bounce_circularG;
-ms-animation-name:bounce_circularG;
-webkit-animation-name:bounce_circularG;
-moz-animation-name:bounce_circularG;
animation-duration:1.1s;
-o-animation-duration:1.1s;
-ms-animation-duration:1.1s;
-webkit-animation-duration:1.1s;
-moz-animation-duration:1.1s;
animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
animation-direction:normal;
-o-animation-direction:normal;
-ms-animation-direction:normal;
-webkit-animation-direction:normal;
-moz-animation-direction:normal;
}
#circularG_1{
left:0;
top:23px;
animation-delay:0.41s;
-o-animation-delay:0.41s;
-ms-animation-delay:0.41s;
-webkit-animation-delay:0.41s;
-moz-animation-delay:0.41s;
}
#circularG_2{
left:6px;
top:6px;
animation-delay:0.55s;
-o-animation-delay:0.55s;
-ms-animation-delay:0.55s;
-webkit-animation-delay:0.55s;
-moz-animation-delay:0.55s;
}
#circularG_3{
top:0;
left:23px;
animation-delay:0.69s;
-o-animation-delay:0.69s;
-ms-animation-delay:0.69s;
-webkit-animation-delay:0.69s;
-moz-animation-delay:0.69s;
}
#circularG_4{
right:6px;
top:6px;
animation-delay:0.83s;
-o-animation-delay:0.83s;
-ms-animation-delay:0.83s;
-webkit-animation-delay:0.83s;
-moz-animation-delay:0.83s;
}
#circularG_5{
right:0;
top:23px;
animation-delay:0.97s;
-o-animation-delay:0.97s;
-ms-animation-delay:0.97s;
-webkit-animation-delay:0.97s;
-moz-animation-delay:0.97s;
}
#circularG_6{
right:6px;
bottom:6px;
animation-delay:1.1s;
-o-animation-delay:1.1s;
-ms-animation-delay:1.1s;
-webkit-animation-delay:1.1s;
-moz-animation-delay:1.1s;
}
#circularG_7{
left:23px;
bottom:0;
animation-delay:1.24s;
-o-animation-delay:1.24s;
-ms-animation-delay:1.24s;
-webkit-animation-delay:1.24s;
-moz-animation-delay:1.24s;
}
#circularG_8{
left:6px;
bottom:6px;
animation-delay:1.38s;
-o-animation-delay:1.38s;
-ms-animation-delay:1.38s;
-webkit-animation-delay:1.38s;
-moz-animation-delay:1.38s;
}
#keyframes bounce_circularG{
0%{
transform:scale(1);
}
100%{
transform:scale(.3);
}
}
#-o-keyframes bounce_circularG{
0%{
-o-transform:scale(1);
}
100%{
-o-transform:scale(.3);
}
}
#-ms-keyframes bounce_circularG{
0%{
-ms-transform:scale(1);
}
100%{
-ms-transform:scale(.3);
}
}
#-webkit-keyframes bounce_circularG{
0%{
-webkit-transform:scale(1);
}
100%{
-webkit-transform:scale(.3);
}
}
#-moz-keyframes bounce_circularG{
0%{
-moz-transform:scale(1);
}
100%{
-moz-transform:scale(.3);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="imageController">
<!-- AJAX loader -->
<div id="circularG" ng-show='showAjaxLoader'>
<div id="circularG_1" class="circularG"></div>
<div id="circularG_2" class="circularG"></div>
<div id="circularG_3" class="circularG"></div>
<div id="circularG_4" class="circularG"></div>
<div id="circularG_5" class="circularG"></div>
<div id="circularG_6" class="circularG"></div>
<div id="circularG_7" class="circularG"></div>
<div id="circularG_8" class="circularG"></div>
</div>
<!-- Next/Previous buttons -->
<button id='previous' ng-click='getPrev()' ng-init='showPrev=false' ng-show='showPrev'>Prev</button>
<button id='next' ng-click='getNext()' ng-show='showNext'>Next</button>
<!-- image -->
<img src={{url}} />
</div>
</body>
Here, is the alternate way using angular directive.
https://jsfiddle.net/8drLy2bp/1/
Directive:
angular
.module('myApp', [])
.directive('orientable', function () {
return {
scope: false,
link: function($scope, element, attrs) {
$scope.$watch("url", function(newValue){
element.bind("load" , function(e){
$scope.$apply(function(){
$scope.showAjaxLoader = false;
});
});
});
}
}
});