Toggle navigation
TUTORIALS
Computers Basics
HTML
HTML5
CSS
CSS3
SEO
Bootstrap 3
Bootstrap 4
Materialize CSS
JavaScript
jQuery
Ajax
AngularJS
C - Language
Java
PHP
Python
REFERENCES
Practice Templates
Bootstrap Templates
PHP Projects
PLUGINS
Bootstrap 3 Plugins
Bootstrap 4 Plugins
Static Menus
Responsive Menus
Dropdown
Tabs & Pills
Modal Boxes (Dialog box)
Gallery Plugins
Sliders
Buttons
Dynamic Forms
Forms
Image Effects
S/W MCQ
S/W INTERVIEW QUESTIONS
COMPETITIVE EXAMS
Current Affairs
Current Affairs MCQ
Monthly Current Affairs MCQ
Today GK
General Knowledge
Verbal Ability
Mental Ability
UPSC
UPSC Previous Questions
UPSC 2022 Prelims Questions
UPSC 2021 Questions
UPSC 2020 Questions
UPSC 2019 Questions
BLOG
MORE
IPC Sections
New
School Mathematics
Code Editor
New
EXECUTE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Pre Loader Animation - Bootstrap Pre Loader</title> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> </head> <style type="text/css"> .pre-loader { width: 100%; height: 100%; position: fixed; top: 0; left: 0; } .loader-animation { width: 200px; height: 200px; margin-top: 20%; margin-left: 40%; position: relative; } .loaderAnimation1, .loaderAnimation2, .loaderAnimation3 { position: absolute; border-radius: 100%; border: 10px solid transparent; } .loaderAnimation1 { width: 150px; height: 150px; border-top: 10px solid #0099da; border-bottom: 10px solid #0099da; top: 15px; left: 15px; animation: leftToRight 2s linear infinite; } .loaderAnimation2 { width: 130px; height: 130px; border: 10px solid #FF5706; top: 25px; left: 25px; } .loaderAnimation3 { width: 110px; height: 110px; border-right: 10px solid #0099da; border-left: 10px solid #0099da; top: 35px; left: 35px; animation: topToBottom 2s linear infinite; } @keyframes leftToRight { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } @keyframes topToBottom { from {transform: rotate(0deg);} to {transform: rotate(-360deg);} } </style> <body> <!-- Start Pre Loader --> <div class="pre-loader"> <div class="loader-animation"> <div class="loaderAnimation1"></div> <div class="loaderAnimation2"></div> <div class="loaderAnimation3"></div> </div> </div> <!-- End Pre Loader --> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var Loader = document.getElementById('preloader'); window.addEventListener('load', function(){ $(Loader).css({'display': 'none'}) }) }) </script> </body> </html>
×
Close
Pre Loader Animation - Bootstrap Pre Loader
Sample Data