Ajax load button animation

Developer
Ianchouinard
Size
3,155 Kb
Views
12,144
  1. Ajax load button animation Previews
  2. Ajax load button animation HTML Codes
  3. Ajax load button animation CSS Codes
  4. Ajax load button animation JS Codes

How do I make an ajax load button animation?

Click button, shows css animation, get html via ajax. Pretty basic, something a haven't really had an opportunity to do much, so I figured I'd try making a mock one.. What is a ajax load button animation? How do you make a ajax load button animation? This script and codes were developed by Ianchouinard on 03 December 2022, Saturday.

Ajax load button animation Previews
IQ Test

Ajax load button animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ajax load button animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="action"> <div class="load center"> <p>Load It</p> <div class="loader"></div> </div>
</section>
<article class="content"></article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Ajax load button animation - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,300);
body { background-color: #2d2d2d; font-family: 'Ubuntu', sans-serif; color: white;
}
.center, .content { top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute;
}
.load, .content .reset { border: 4px solid #e13b3b; font-size: 1.2em; cursor: pointer; width: auto; height: auto; padding: .8em 1.5em; border-radius: 0; transition: all 500ms;
}
.load:hover, .content .reset:hover { padding: .9em 1.75em; background-color: rgba(225, 59, 59, 0.18);
}
.bar { width: 155px; height: 3px; padding: 0; background-color: rgba(225, 59, 59, 0.7); border: none;
}
.bar .loader { width: 20px; height: 3px; background-image: linear-gradient(to right, rgba(250, 250, 250, 0.3), #fff); animation: slide infinite .75s linear;
}
.bar:hover { padding: 0; background-color: rgba(225, 59, 59, 0.7);
}
@keyframes slide { from { margin-left: -20px; } to { margin-left: 135px; }
}
.content h1 { text-align: center; font-size: 1.6em;
}
.content .reset { text-align: center; margin-top: 1em;
}

Ajax load button animation - Script Codes JS Codes

$(document).ready(function(){ //ajax function loadMe(){ $.get( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/242749/loadMe.html', function(data) { $('.content').html(data);}); $('.load').hide(); }; //kicks things off $('.action').on('click', '.load', function(){ //starts load animation $(this).find('p') .html(''); $(this).addClass('bar'); //sim load time and run ajax function setTimeout(loadMe, 3000); }); //restarts demo $('.content').on('click', '.reset', function(){ $('.content').html(""); $('.load').removeClass('bar') .find('p') .html('Load It'); $('.load').fadeIn(); });
});
Ajax load button animation - Script Codes
Ajax load button animation - Script Codes
Home Page Home
Developer Ianchouinard
Username ianchouinard
Uploaded December 03, 2022
Rating 4.5
Size 3,155 Kb
Views 12,144
Do you need developer help for Ajax load button animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ianchouinard (ianchouinard) Script Codes
Name
Background transition progress bar
Simple Counter
3d css flip book
IOS clock app icon
A form.
Background expand on hover transition
Smartwatch OS
3d wordpress login
Working JS Boggle
Slider Transition Layout Experiment
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!