Simple Spinner
How do I make an simple spinner?
Simple css3 Spinner models . What is a simple spinner? How do you make a simple spinner? This script and codes were developed by Vineeth.TR on 04 July 2022, Monday.
Simple Spinner Previews
Simple Spinner - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Spinner</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="mod model-1"> <div class="spinner"></div>
</section>
<section class="mod model-2"> <div class="spinner"></div>
</section>
<section class="mod model-3"> <div class="spinner"></div>
</section>
<section class="mod model-4"> <div class="spinner"></div>
</section>
<section class="mod model-5"> <div class="spinner"></div>
</section>
<section class="mod model-6"> <div class="spinner"></div>
</section>
<section class="mod model-7"> <div class="spinner"></div>
</section>
<section class="mod model-8"> <div class="spinner"></div>
</section>
<section class="mod model-9"> <div class="spinner"></div>
</section>
<section class="mod model-10"> <div class="spinner"></div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://codepen.io/fbrz/pen/9a3e4ee2ef6dfd479ad33a2c85146fc1.js'></script> <script src="js/index.js"></script>
</body>
</html>Simple Spinner - Script Codes CSS Codes
* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font-family: arial;
}
body { padding: 0; margin: 0; text-align: center; font-family: arial;
}
section { height: 250px; float: left; width: 50%; position: relative;
}
.spinner { width: 50px; height: 50px; border-radius: 100%; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;
}
.model-1 { background: #202020;
}
.model-1 .spinner { color: #f00; -webkit-animation: color-bubble 2s linear 0s infinite; animation: color-bubble 2s linear 0s infinite;
}
.model-1 .spinner:after, .model-1 .spinner:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 100%; box-shadow: 0 0 0 3px; -webkit-animation: spinner-bubble 1.3s linear 0s infinite; animation: spinner-bubble 1.3s linear 0s infinite; margin: auto; width: 10px; height: 10px; opacity: 0;
}
.model-1 .spinner:before { -webkit-animation: spinner-bubble 1.3s linear 2s infinite; animation: spinner-bubble 1.3s linear 2s infinite;
}
.model-2 { background: #4B346F;
}
.model-2 .spinner { border: 1px solid; -webkit-animation: rotate 1.3s linear 0s infinite, color-bubble 3s linear 0s infinite; animation: rotate 1.3s linear 0s infinite, color-bubble 3s linear 0s infinite;
}
.model-2 .spinner:after { content: ''; position: absolute; width: 15px; height: 15px; background: #fff; border-radius: 100%; -webkit-animation: color-change 3s linear 0s infinite; animation: color-change 3s linear 0s infinite; left: -5px; top: 18px;
}
.model-3 { background: #BF1B21;
}
.model-3 .spinner { background: #fff; height: 40px; border-radius: 0; -webkit-animation: rotateRct 1.2s ease-in-out infinite, color-change 1.3s ease-in-out infinite; animation: rotateRct 1.2s ease-in-out infinite, color-change 1.3s ease-in-out infinite;
}
.model-4 { background: #FFA500;
}
.model-4 .spinner { border: 5px solid rgba(255, 255, 255, 0.5); border-bottom-color: #f00; -webkit-animation: rotate 2s linear 0s infinite; animation: rotate 2s linear 0s infinite;
}
.model-5 { background: #034BB5;
}
.model-5 .spinner { border: 5px solid transparent; border-bottom-color: #19A5DF; border-top-color: #19A5DF; -webkit-animation: rotate 1.5s linear 0s infinite; animation: rotate 1.5s linear 0s infinite;
}
.model-6 { background: #009200;
}
.model-6 .spinner { border: 2px solid #19A5DF; border-radius: 0; -webkit-animation: rotate 3s infinite; animation: rotate 3s infinite;
}
.model-6 .spinner:after, .model-6 .spinner:before { content: ''; position: absolute; left: 5px; top: 5px; width: 32px; height: 32px; border: 2px solid #FEB825; -webkit-animation: rotate 3s infinite reverse; animation: rotate 3s infinite reverse;
}
.model-6 .spinner:before { border-color: #fff; left: 10px; top: 10px; width: 22px; height: 22px; -webkit-animation: rotate 2s infinite; animation: rotate 2s infinite;
}
.model-7 { background: #FF451C;
}
.model-7 .spinner { -webkit-animation: rotate 1.3s linear 0s infinite, size 5s linear 0s infinite alternate; animation: rotate 1.3s linear 0s infinite, size 5s linear 0s infinite alternate;
}
.model-7 .spinner:after, .model-7 .spinner:before { content: ''; position: absolute; width: 15px; height: 15px; background: #fff; border-radius: 100%; left: 0px; top: 0px; bottom: 0; margin: auto;
}
.model-7 .spinner:before { left: auto; right: 0;
}
.model-8 { background: #C90463;
}
.model-8 .spinner { width: 100px; height: 20px; border-radius: 0;
}
.model-8 .spinner:before { content: ''; position: absolute; width: 10px; height: 10px; left: 0; border-radius: 100%; -webkit-animation: shadowSize 2s ease-in infinite; animation: shadowSize 2s ease-in infinite; color: #fff;
}
.model-9 { background: #12846D;
}
.model-9 .spinner:after, .model-9 .spinner:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 30px; height: 30px; border: 5px solid transparent; border-bottom: 5px solid #fff; border-radius: 100%; -webkit-animation: rotate 1s linear infinite; animation: rotate 1s linear infinite;
}
.model-9 .spinner:before { width: 40px; height: 40px; -webkit-animation-direction: reverse; animation-direction: reverse;
}
.model-10 { background: #3D6AA2;
}
.model-10 .spinner { background: #fff; overflow: hidden; -webkit-animation: color-change 3s linear 0s infinite, shadow 1.3s linear 0s infinite, color-bubble 5s linear 0s infinite alternate, rotate 5s linear 0s infinite; animation: color-change 3s linear 0s infinite, shadow 1.3s linear 0s infinite, color-bubble 5s linear 0s infinite alternate, rotate 5s linear 0s infinite;
}
@-webkit-keyframes spinner-bubble { from { width: 10px; height: 10px; opacity: .8; } to { width: 50px; height: 50px; opacity: 0; }
}
@keyframes spinner-bubble { from { width: 10px; height: 10px; opacity: .8; } to { width: 50px; height: 50px; opacity: 0; }
}
@-webkit-keyframes color-bubble { 0% { color: #009DDC; } 33% { color: #50B949; } 66% { color: #EE2D24; } 100% { color: #FEB825; }
}
@keyframes color-bubble { 0% { color: #009DDC; } 33% { color: #50B949; } 66% { color: #EE2D24; } 100% { color: #FEB825; }
}
@-webkit-keyframes color-change { 0% { background: #009DDC; } 33% { background: #50B949; } 66% { background: #EE2D24; } 100% { background: #FEB825; }
}
@keyframes color-change { 0% { background: #009DDC; } 33% { background: #50B949; } 66% { background: #EE2D24; } 100% { background: #FEB825; }
}
@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes rotateRct { 0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }
}
@keyframes rotateRct { 0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }
}
@-webkit-keyframes size { from { width: 70px; height: 70px; } to { width: 30px; height: 30px; }
}
@keyframes size { from { width: 70px; height: 70px; } to { width: 30px; height: 30px; }
}
@-webkit-keyframes shadow { from { box-shadow: 0px 0 0 1px inset; } to { box-shadow: 50px 0 0 1px inset; }
}
@keyframes shadow { from { box-shadow: 0px 0 0 1px inset; } to { box-shadow: 50px 0 0 1px inset; }
}
@-webkit-keyframes shadowSize { 0% { box-shadow: 15px 0 0 0, 30px 0 0 0, 45px 0 0 0, 60px 0 0 0, 75px 0 0 0; } 20% { box-shadow: 15px 0 0 5px, 30px 0 0 0, 45px 0 0 0, 60px 0 0 0, 75px 0 0 0; } 40% { box-shadow: 15px 0 0 0, 30px 0 0 5px, 45px 0 0 0, 60px 0 0 0, 75px 0 0 0; } 60% { box-shadow: 15px 0 0 0, 30px 0 0 0, 45px 0 0 5px, 60px 0 0 0, 75px 0 0 0; } 80% { box-shadow: 15px 0 0 0, 30px 0 0 0, 45px 0 0 0, 60px 0 0 5px, 75px 0 0 0; } 100% { box-shadow: 15px 0 0 0, 30px 0 0 0, 45px 0 0 0, 60px 0 0 0, 75px 0 0 5px; }
}
@keyframes shadowSize { 0% { box-shadow: 15px 0 0 0, 30px 0 0 0, 45px 0 0 0, 60px 0 0 0, 75px 0 0 0; } 20% { box-shadow: 15px 0 0 5px, 30px 0 0 0, 45px 0 0 0, 60px 0 0 0, 75px 0 0 0; } 40% { box-shadow: 15px 0 0 0, 30px 0 0 5px, 45px 0 0 0, 60px 0 0 0, 75px 0 0 0; } 60% { box-shadow: 15px 0 0 0, 30px 0 0 0, 45px 0 0 5px, 60px 0 0 0, 75px 0 0 0; } 80% { box-shadow: 15px 0 0 0, 30px 0 0 0, 45px 0 0 0, 60px 0 0 5px, 75px 0 0 0; } 100% { box-shadow: 15px 0 0 0, 30px 0 0 0, 45px 0 0 0, 60px 0 0 0, 75px 0 0 5px; }
}
Simple Spinner - Script Codes JS Codes
//======== JS Not Required ========
alsolike( "MYBeyB", "Pagination", "VYRzaV", "Open Close", "EaGbxW", "Social Nav"
);
| Developer | Vineeth.TR |
| Username | vineethtr |
| Uploaded | July 04, 2022 |
| Rating | 4.5 |
| Size | 4,706 Kb |
| Views | 46,552 |
Do you need developer help for Simple Spinner?
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!
Vineeth.TR (vineethtr) Script Codes
| Name | Size |
| Material Login | 5,012 Kb |
| Login form shake effect | 3,430 Kb |
| A Pen by Vineeth.TR | 5,501 Kb |
| Loading | 3,699 Kb |
| 404 Crying Baby | 4,619 Kb |
| Open Close | 5,233 Kb |
| Semi Circle Donut Charts | 4,156 Kb |
| Cloud File Upload | 3,403 Kb |
| Css3 Transform | 3,806 Kb |
| Social Nav | 6,778 Kb |
Create amazing video scripts 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!
Similar Scripts & Codes
| Name | Username | Size |
| Apex Calculator | Michaelwnelson | 2,370 Kb |
| Navcube | Wbarlow | 4,775 Kb |
| Blog Concept 2 | JGallardo | 2,994 Kb |
| Content Changer | Cliffpyles | 4,538 Kb |
| A Pen by Xand0r | Xand0r | 1,928 Kb |
| Sass random color animation | Jotavejv | 4,827 Kb |
| My Interests | Anshusaxenaarora | 2,015 Kb |
| Starting out with Ember.JS | Cfleschhut | 4,808 Kb |
| Nav Test -- cats 1 | Payls | 4,735 Kb |
| SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!