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> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 3 Page Loading</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <style type="text/css"> #loading { background: #f4f4f2 url("img/page-bg.png") repeat scroll 0 0; height: 100%; left: 0; margin: auto; position: fixed; top: 0; width: 100%; } .ftl { border: 0.01em solid rgba(150, 150, 150, 0.1); border-radius: 50%; font-size: 100px; height: 1em; list-style: outside none none; margin: 0 auto; position: relative; top: 35%; width: 1em; z-index: 2147483647; } .ftl li { border-radius: 50%; height: 0.2em; position: absolute; width: 0.2em; } .ftl li:nth-child(1) { animation: 1.13s linear 0s normal none infinite running rota, 3.67s ease-in-out 0s alternate none infinite running opa; background: #00c176 none repeat scroll 0 0; left: 50%; margin: 0 0 0 -0.1em; top: 0; transform-origin: 50% 250% 0; } .ftl li:nth-child(2) { animation: 1.86s linear 0s normal none infinite running rota, 4.29s ease-in-out 0s alternate none infinite running opa; background: #ff003c none repeat scroll 0 0; margin: -0.1em 0 0; right: 0; top: 50%; transform-origin: -150% 50% 0; } .ftl li:nth-child(3) { animation: 1.45s linear 0s normal none infinite running rota, 5.12s ease-in-out 0s alternate none infinite running opa; background: #fabe28 none repeat scroll 0 0; bottom: 0; left: 50%; margin: 0 0 0 -0.1em; transform-origin: 50% -150% 0; } .ftl li:nth-child(4) { animation: 1.72s linear 0s normal none infinite running rota, 5.25s ease-in-out 0s alternate none infinite running opa; background: #88c100 none repeat scroll 0 0; margin: -0.1em 0 0; top: 50%; transform-origin: 250% 50% 0; } @keyframes opa { 12% { opacity: 0.8; } 19.5% { opacity: 0.88; } 37.2% { opacity: 0.64; } 40.5% { opacity: 0.52; } 52.7% { opacity: 0.69; } 60.2% { opacity: 0.6; } 66.6% { opacity: 0.52; } 70% { opacity: 0.63; } 79.9% { opacity: 0.6; } 84.2% { opacity: 0.75; } 91% { opacity: 0.87; } } @keyframes rota { 100% { transform: rotate(360deg); } } } </style> <div class="container"> <div class="row"> <h2>Bootstrap 3 Page Loading</h2> <div id="loading"> <ul class="ftl"> <li></li> <li></li> <li></li> </ul> </div> </div> </div> </body> </html>
×
Close
Bootstrap 3 Page Loading
Sample Data