More button Loader

Developer
Andy Lorimer
Size
2,119 Kb
Views
30,360
  1. More button Loader Previews
  2. More button Loader HTML Codes
  3. More button Loader CSS Codes
  4. More button Loader JS Codes

How do I make an more button loader?

What is a more button loader? How do you make a more button loader? This script and codes were developed by Andy Lorimer on 22 July 2022, Friday.

More button Loader Previews
IQ Test

More button Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>More button Loader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button class="more"><span>More</span></button> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

More button Loader - Script Codes CSS Codes

@import url('http://fonts.googleapis.com/css?family=Varela+Round');
body { margin: 0; padding: 0; font-family: 'Varela Round';
}
button:focus { outline: none;
}
.more { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: inline-block; padding: 15px 25px; background: #3957ea; border: none; font: 14px 'Varela Round'; color: #fff; border-radius: 100px; cursor: pointer; -webkit-transition: .3s ease; -moz-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease;
}
.more:after { content: ''; display: none; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; border: solid 2px; border-color: #fff transparent transparent transparent; border-radius: 100%; -webkit-transition: .3s ease; -moz-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; animation: spin 1s infinite; transform-origin: 0 0;
}
.more.load { padding: 15px 6px;
}
.more.load span { opacity: 0;
}
.more.load:after { display: block;
}
@keyframes spin { from { transform: rotate(0) translate(-50%, -50%) } to { transform: rotate(360deg) translate(-50%, -50%) }
}

More button Loader - Script Codes JS Codes

var $btn = $('.more');
$btn.on('click', function() { $(this).addClass('load'); setTimeout(function() { $('.more').removeClass('load'); }, 4000);
});
More button Loader - Script Codes
More button Loader - Script Codes
Home Page Home
Developer Andy Lorimer
Username andylorimer
Uploaded July 22, 2022
Rating 3
Size 2,119 Kb
Views 30,360
Do you need developer help for More button Loader?

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!

Andy Lorimer (andylorimer) Script Codes
Name
Loading Animation
Searchbar with Navigation
Dropzone Uploader
Random Spinning loader
Sign-up Card
Messing about with CSS3 animations
A Pen by Andy Lorimer
Off-Canvas Menu
Feature Slider
Social Icons Transition
Create amazing video scripts 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!