Loading Sphere

Developer
Matt Wisniewski
Size
2,708 Kb
Views
12,144
  1. Loading Sphere Previews
  2. Loading Sphere HTML Codes
  3. Loading Sphere CSS Codes
  4. Loading Sphere JS Codes

How do I make an loading sphere?

Just got bored lol. What is a loading sphere? How do you make a loading sphere? This script and codes were developed by Matt Wisniewski on 03 December 2022, Saturday.

Loading Sphere Previews
IQ Test

Loading Sphere - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Loading Sphere</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="timer"> <div class="loadring"> <div class="cap"> <div class="centerload"> <div class="stripes"></div> </div> </div> <div class="filler"></div> </div>
</div>
<h2 style="color:#fff;margin-top:-100px;text-shadow:1px 1px 5px rgba(0,0,0,.5);" align="center">Loading...</h2> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Loading Sphere - Script Codes CSS Codes

body{ background:url('http://wallpoper.com/images/00/32/20/08/purple-gaussian_00322008.jpg');
}
.filler{ transition:top .5s ease-in; width:100%; height:100%; position:absolute; top:0%;
background: #87e0fd; /* Old browsers */
background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */ box-shadow:0px -1px 5px rgba(100,200,255,.8);
}
.timer{ margin:140px auto; width:200px; height:200px; border-radius:100px; box-shadow:0px -1px 1px #000,0 0 100px rgba(0,0,0,.6); background: #ffffff; /* Old browsers */
background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e5e5e5));
background: -webkit-linear-gradient(#ffffff 0%, #e5e5e5 100%);
background: -moz-linear-gradient(#ffffff 0%, #e5e5e5 100%);
background: -o-linear-gradient(#ffffff 0%, #e5e5e5 100%);
background: linear-gradient(#ffffff 0%, #e5e5e5 100%); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */ position:relative;
}
.loadring{ overflow:hidden; width:90%; height:90%; border-radius:50%; top:5%; left:5%; position:absolute;
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
background: linear-gradient(to bottom, #00b7ea 0%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */ box-shadow:1px 1px 1px #fff;
}
.cap{ z-index:3; position:absolute; width:85%; height:85%; border-radius:55%; background: #ffffff; /* Old browsers */
background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e5e5e5));
background: -webkit-linear-gradient(#ffffff 0%, #e5e5e5 100%);
background: -moz-linear-gradient(#ffffff 0%, #e5e5e5 100%);
background: -o-linear-gradient(#ffffff 0%, #e5e5e5 100%);
background: linear-gradient(#ffffff 0%, #e5e5e5 100%); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */ box-shadow:5px 5px 5px rgba(0,0,0,.2);
}
.centerload{ width:50%; height:50%; border-radius:50%; top:10%; left:10%; position:absolute; background: #87e0fd; /* Old browsers */
background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */ box-shadow:inset 3px 3px 5px rgba(0,0,0,.2),-1px -1px 1px #fff;
}
.stripes{ background:url('https://i.imgur.com/HTzLsiU.png'); width:100%; height:100%; border-radius:50%; opacity:.08;
}

Loading Sphere - Script Codes JS Codes

var stripes_pos = 0, $stripes = $('.stripes'), loaded = 100, $filler = $('.filler');
(function stripes(){ stripes_pos++; $stripes.css('background-position', stripes_pos); setTimeout(arguments.callee,10);
}());
(function loadingsim(){ loaded-=5; console.log(loaded); $filler.css('top',loaded + "%"); setTimeout(arguments.callee,1000);
}());
Loading Sphere - Script Codes
Loading Sphere - Script Codes
Home Page Home
Developer Matt Wisniewski
Username tinderlight
Uploaded December 03, 2022
Rating 3
Size 2,708 Kb
Views 12,144
Do you need developer help for Loading Sphere?

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!

Matt Wisniewski (tinderlight) Script Codes
Name
Foxtrot Admin
JQuery Parallax Plugin
Alternate Codepen Theme
Custom HTML5 Player Testing
Fancy text thing like twitter
MattsCode.io Site
A Pen by Matt Wisniewski
Create amazing marketing copy 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!