Loader

Developer
Anton Staroverov
Size
3,362 Kb
Views
16,192
  1. Loader Previews
  2. Loader HTML Codes
  3. Loader CSS Codes
  4. Loader JS Codes

How do I make an loader?

Single-file Bootstrap starter template.https://bootstrap.tonystar.me/template. What is a loader? How do you make a loader? This script and codes were developed by Anton Staroverov on 18 November 2022, Friday.

Loader Previews
IQ Test

Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html class=" text-center no-js">
<head> <meta charset="UTF-8"> <title>Loader</title> <meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content="Single-file Bootstrap template"/>
<meta name="author" content="Anton Staroverov (http://tonystar.me)"/>
<meta name="generator" content="Bootstrap Template (http://bootstrap.tonystar.me/template)"/>
<link rel="icon" href="//cdn.rawgit.com/twbs/bootstrap/v3.3.5/docs/favicon.ico"/> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdn.rawgit.com/tonystar/bootstrap-plugins/master/dist/css/bootstrap-plugins.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="jumbotron loading"> <div class="container"> <h1>Bootstrap Template</h1> <p> Use this template as a way to quickly start any new project.<br/> All you get is a single HTML file with everything bootstrapped! </p> <div> <a href="https://github.com/tonystar/bootstrap-template/archive/master.zip" class="btn btn-primary btn-lg"><i class="fa fa-download"></i>&nbsp; Download</a> <a href="https://github.com/tonystar/bootstrap-template" class="btn btn-default btn-lg">Fork on &nbsp;<i class="fa fa-github"></i></a> <a href="https://codepen.io/tonystar/pen/pJpROO" class="btn btn-default btn-lg">Fork on &nbsp;<i class="fa fa-codepen"></i></a> </div> </div>
</header>
<button id="toggle" class="btn btn-default">Toggle .loading class</button> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='http://cdn.rawgit.com/tonystar/bootstrap-plugins/master/dist/js/bootstrap-plugins.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Loader - Script Codes CSS Codes

html,
body { background: #eee;
}
.loading { position: relative; -webkit-perspective: 10rem; perspective: 10rem;
}
.loading::before { content: " "; display: block; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); position: absolute; z-index: 1; top: 0; left: 0;
}
.loading::after { content: " "; display: block; position: absolute; z-index: 2; top: 50%; left: 50%; /* width: 2rem; height: 2rem; border-radius: 1rem; background: black; margin: -1rem 0 0 -1rem; animation: loading 1.5s infinite linear; */ width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.1); border-left: 2px solid blue; margin: -1rem 0 0 -1rem; -webkit-animation: rotation 1.1s infinite linear; animation: rotation 1.1s infinite linear;
}
@-webkit-keyframes loading { 0% { -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); margin-left: -2.5rem; } 10% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 29% { -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); margin-left: -2.5rem; } 30% { -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); margin-left: 0; } 40% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 59% { -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); margin-left: 0; } 60% { -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); margin-left: 2.5rem; } 70% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 89% { -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); margin-left: 2.5rem; } 100% { -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); margin-left: -2.5rem; }
}
@keyframes loading { 0% { -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); margin-left: -2.5rem; } 10% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 29% { -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); margin-left: -2.5rem; } 30% { -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); margin-left: 0; } 40% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 59% { -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); margin-left: 0; } 60% { -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); margin-left: 2.5rem; } 70% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 89% { -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); margin-left: 2.5rem; } 100% { -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); margin-left: -2.5rem; }
}
@-webkit-keyframes rotation { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes rotation { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

Loader - Script Codes JS Codes

(function ($) { $(function () { $('#toggle').on('click', function () { $('.jumbotron').toggleClass('loading'); }); });
})(jQuery);
Loader - Script Codes
Loader - Script Codes
Home Page Home
Developer Anton Staroverov
Username tonystar
Uploaded November 18, 2022
Rating 3
Size 3,362 Kb
Views 16,192
Do you need developer help for 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!

Anton Staroverov (tonystar) Script Codes
Name
Pure-CSS Float Label. Finally.
Flag
Bootstrap 4 Float Label
Bootstrap 4 Floating Labels
Col togglers
Bootstrap Hover Tabs
Pure-CSS 3D Spinning Text
Bootstrap 3 Float Label
Container and clip path
Bootstrap Perfect
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!