Status Loader

Developer
Gigaleet
Size
3,646 Kb
Views
6,072
  1. Status Loader Previews
  2. Status Loader HTML Codes
  3. Status Loader CSS Codes
  4. Status Loader JS Codes

How do I make an status loader?

What is a status loader? How do you make a status loader? This script and codes were developed by Gigaleet on 06 January 2023, Friday.

Status Loader Previews
IQ Test

Status Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Status Loader</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="section status-bar"> <a href="https://status.ipvanish.com/" target="_blank" rel="noopener"> <div class="status-bar-inner">	<i class="fa dual-ring"><div></div></i><span class="system-label">Checking system status</span><span class="system-status"></span><u>View Status</u> </div> </a>
</section>
<footer class="footer"> <div class="primary"> <div class="footer-inner"> <ul> <li><a href="https://account.ipvanish.com/">Account Dashboard</a></li> <li><a href="https://www.ipvanish.com/setup-guides/">Setup</a></li> <li><a href="https://blog.ipvanish.com">Blog</a></li> </ul> </div> </div> <div class="secondary"> <div class="footer-inner"> <ul> <li><a href="https://facebook.com/ipvanish" target="_blank" rel="noopener"><i class="fa fa-facebook"></i></a></li> <li><a href="https://twitter.com/ipvanish" target="_blank" rel="noopener"><i class="fa fa-twitter"></i></a></li> <li><a href="https://plus.google.com/+Ipvanish" target="_blank" rel="noopener"><i class="fa fa-google-plus"></i></a></li> <li><a href="https://www.youtube.com/channel/UCSDL24yFxtRk3utxnKBfAag" target="_blank" rel="noopener"><i class="fa fa-youtube"></i></a></li> </ul> <ul> <li><a href="https://status.ipvanish.com/" target="_blank" rel="noopener"><span class="status-dot"></span>Status</a></li> <li><a href="https://www.ipvanish.com/privacy-policy.php">Privacy</a></li> <li><a href="https://www.ipvanish.com/tos.php">Terms</a></li> <li><a href="https://www.ipvanish.com/export-policy.php">Export Policy</a></li> <li><a href="https://www.ipvanish.com/dmca-policy.php">DMCA Policy</a></li> </ul> </div> </div>
</footer> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Status Loader - Script Codes CSS Codes

body { background-color: #fff; color: #000; font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { text-decoration: none;
}
a:hover { text-decoration: underline;
}
/***** Status Bar component *****/
.status-bar { background-color: #eee; -webkit-transition: all 0.3 cubic-bezier(0.465, 0.183, 0.153, 0.946); transition: all 0.3 cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
.status-bar-inner { max-width: 1024px; margin: 0 auto; margin-bottom: 40px; padding: 15px;
}
@media (max-width: 370px) { .status-bar-inner { font-size: 13px; }
}
.status-bar .fa { font-size: 22px; margin-right: 6px; -webkit-transition: all 0.3 cubic-bezier(0.465, 0.183, 0.153, 0.946); transition: all 0.3 cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
.status-bar .system-label { font-weight: bold;
}
.status-bar u { float: right;
}
.status-bar u:hover { text-decoration: none;
}
.status-bar a { color: #666;
}
.status-bar a:hover { text-decoration: none;
}
.status-bar.operational { background-color: #dff0d8;
}
.status-bar.operational a { color: #3c763d;
}
.status-bar.issues { background-color: #d9edf7;
}
.status-bar.issues a { color: #31708f;
}
.status-bar.partialout { background-color: #faf2cc;
}
.status-bar.partialout a { color: #8a6d3b;
}
.status-bar.outage { background-color: #ebcccc;
}
.status-bar.outage a { color: #a94442;
}
.dual-ring div { display: inline-block; width: 15px; height: 15px; vertical-align: middle; border-radius: 50%; border: 2px solid #000; border-color: #666 transparent #666 transparent; -webkit-animation: dual-ring 1.3s linear infinite; animation: dual-ring 1.3s linear infinite;
}
@-webkit-keyframes dual-ring { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes dual-ring { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
/***** Footer *****/
.footer { border-top: 1px solid #ddd; background-color: #000; color: #fff;
}
.footer-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: auto; padding: 20px; max-width: 1200px;
}
.footer ul { list-style: none; padding: 0; margin: 0;
}
.footer ul li { display: inline-block;
}
.footer p { margin: 0;
}
.footer a { margin: 0 10px; font-size: 17px; color: #fff; text-decoration: none;
}
.footer a:hover, .footer a:active, .footer a:focus { color: #bbb; text-decoration: none;
}
.footer .primary { font-size: 1.3em;
}
.footer .primary .footer-inner { display: block; text-align: center;
}
.footer .secondary a { font-size: 13px;
}
.footer .status-dot { width: 8px; height: 8px; background: #eee; box-shadow: 0 0 3px 2px #eee; border-radius: 4px; display: inline-block; margin-right: 8px; -webkit-animation-name: grayPulse; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite;
}
.footer .status-dot.operational { background: #4caf50; box-shadow: 0 0 3px 2px #4caf50; -webkit-animation-name: greenPulse;
}
.footer .status-dot.issues { background: #e3e11c; box-shadow: 0 0 3px 2px #e3e11c; -webkit-animation-name: bluePulse;
}
.footer .status-dot.partialout { background: #f9ac00; box-shadow: 0 0 3px 2px #f9ac00; -webkit-animation-name: yellowPulse;
}
.footer .status-dot.outage { background: #d40007; box-shadow: 0 0 3px 2px #d40007; -webkit-animation-name: redPulse;
}
@-webkit-keyframes greyPulse { from { background-color: #999; box-shadow: 0 0 9px #333; } 50% { background-color: #666; box-shadow: 0 0 11px #666; } to { background-color: #999; box-shadow: 0 0 9px #333; }
}
@-webkit-keyframes greenPulse { from { background-color: #4caf50; box-shadow: 0 0 9px #333; } 50% { background-color: #66bb6a; box-shadow: 0 0 11px #66bb6a; } to { background-color: #4caf50; box-shadow: 0 0 9px #333; }
}
@-webkit-keyframes bluePulse { from { background-color: #053ecf; box-shadow: 0 0 9px #333; } 50% { background-color: #2058e6; box-shadow: 0 0 11px #2058e6; } to { background-color: #053ecf; box-shadow: 0 0 9px #333; }
}
@-webkit-keyframes yellow { from { background-color: #e3e11c; box-shadow: 0 0 9px #333; } 50% { background-color: #f8f64e; box-shadow: 0 0 11px #f8f64e; } to { background-color: #e3e11c; box-shadow: 0 0 9px #333; }
}
@-webkit-keyframes redPulse { from { background-color: #d40007; box-shadow: 0 0 9px #333; } 50% { background-color: #f73138; box-shadow: 0 0 11px #f73138; } to { background-color: #d40007; box-shadow: 0 0 9px #333; }
}

Status Loader - Script Codes JS Codes

$.getJSON("https://status.ipvanish.com/api/v1/components/", function(data) { setTimeout(function() { data.data.forEach(function(arrayItem) { var status = arrayItem.status; switch (status) { case 1: $(".footer .status-dot, .status-bar").addClass("operational"); $(".status-bar .fa").removeClass("dual-ring").addClass("fa-check"); $(".status-bar .system-label").html("System Status: "); $(".status-bar .system-status").html("All Systems Operational"); break; case 2: $(".footer .status-dot, .status-bar").addClass("issues"); $(".status-bar .fa").removeClass("dual-ring").addClass("fa-info"); $(".status-bar .system-label").html("System Status: "); $(".status-bar .system-status").html("Performance Issues"); break; case 3: $(".footer .status-dot, .status-bar").addClass("partialout"); $(".status-bar .fa").removeClass("dual-ring").addClass("fa-exclamation"); $(".status-bar .system-label").html("System Status: "); $(".status-bar .system-status").html("Partial Outage"); break; case 4: $(".footer .status-dot, .status-bar").addClass("outage"); $(".status-bar .fa").removeClass("dual-ring").addClass("fa-times"); $(".status-bar .system-label").html("System Status: "); $(".status-bar .system-status").html("Major Outage"); break; default: // do nothing } }); }, 2000);
});
Status Loader - Script Codes
Status Loader - Script Codes
Home Page Home
Developer Gigaleet
Username Gigaleet
Uploaded January 06, 2023
Rating 3
Size 3,646 Kb
Views 6,072
Do you need developer help for Status 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!

Gigaleet (Gigaleet) Script Codes
Name
Pure CSS Hamburger Button
CSS placeholder labels
Modern Login Box
Modal Dialog
Light Box
FlexBox Fixed Left Side Bar and Header Layout
A Pen by Gigaleet
Create amazing Facebook ads 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!