Exploring css spinners

Developer
Akash Agrawal
Size
3,569 Kb
Views
30,360
  1. Exploring css spinners Previews
  2. Exploring css spinners HTML Codes
  3. Exploring css spinners CSS Codes

How do I make an exploring css spinners?

What is a exploring css spinners? How do you make a exploring css spinners? This script and codes were developed by Akash Agrawal on 24 September 2022, Saturday.

Exploring css spinners Previews
IQ Test

Exploring css spinners - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Exploring css spinners</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='spinner'> <div id='floatingBarsG'> <div class='blockG' id='rotateG_01'></div> <div class='blockG' id='rotateG_02'></div> <div class='blockG' id='rotateG_03'></div> <div class='blockG' id='rotateG_04'></div> <div class='blockG' id='rotateG_05'></div> <div class='blockG' id='rotateG_06'></div> <div class='blockG' id='rotateG_07'></div> <div class='blockG' id='rotateG_08'></div> </div>
</div>
<div class='text'> SPINNER
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Exploring css spinners - Script Codes CSS Codes

.spinner { position: fixed; z-index: 1; top: 25%; left: 50%; width: 62px; display: block; padding: 15px; background: #222; border-radius: 25px; opacity: 0.8;
}
#floatingBarsG { position: relative; width: 62px; height: 77px;
}
.blockG { position: absolute; background-color: #FFFFFF; width: 10px; height: 24px; -moz-border-radius: 8px 8px 0 0; -moz-transform: scale(0.4); -moz-animation-name: fadeG; -moz-animation-duration: 0.5s; -moz-animation-iteration-count: infinite; -moz-animation-direction: linear; -webkit-border-radius: 8px 8px 0 0; -webkit-transform: scale(0.4); -webkit-animation-name: fadeG; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: linear; -ms-border-radius: 8px 8px 0 0; -ms-transform: scale(0.4); -ms-animation-name: fadeG; -ms-animation-duration: 0.5s; -ms-animation-iteration-count: infinite; -ms-animation-direction: linear; -o-border-radius: 8px 8px 0 0; -o-transform: scale(0.4); -o-animation-name: fadeG; -o-animation-duration: 0.5s; -o-animation-iteration-count: infinite; -o-animation-direction: linear; border-radius: 8px 8px 0 0; transform: scale(0.4); animation-name: fadeG; animation-duration: 0.5s; animation-iteration-count: infinite; animation-direction: linear;
}
#rotateG_01 { left: 0; top: 28px; -moz-animation-delay: 0.63s; -moz-transform: rotate(-90deg); -webkit-animation-delay: 0.63s; -webkit-transform: rotate(-90deg); -ms-animation-delay: 0.63s; -ms-transform: rotate(-90deg); -o-animation-delay: 0.63s; -o-transform: rotate(-90deg); animation-delay: 0.63s; transform: rotate(-90deg);
}
#rotateG_02 { left: 8px; top: 10px; -moz-animation-delay: 0.5599999999999999s; -moz-transform: rotate(-45deg); -webkit-animation-delay: 0.5599999999999999s; -webkit-transform: rotate(-45deg); -ms-animation-delay: 0.5599999999999999s; -ms-transform: rotate(-45deg); -o-animation-delay: 0.5599999999999999s; -o-transform: rotate(-45deg); animation-delay: 0.5599999999999999s; transform: rotate(-45deg);
}
#rotateG_03 { left: 26px; top: 3px; -moz-animation-delay: 0.48999999999999994s; -moz-transform: rotate(0deg); -webkit-animation-delay: 0.48999999999999994s; -webkit-transform: rotate(0deg); -ms-animation-delay: 0.48999999999999994s; -ms-transform: rotate(0deg); -o-animation-delay: 0.48999999999999994s; -o-transform: rotate(0deg); animation-delay: 0.48999999999999994s; transform: rotate(0deg);
}
#rotateG_04 { right: 8px; top: 10px; -moz-animation-delay: 0.41999999999999993s; -moz-transform: rotate(45deg); -webkit-animation-delay: 0.41999999999999993s; -webkit-transform: rotate(45deg); -ms-animation-delay: 0.41999999999999993s; -ms-transform: rotate(45deg); -o-animation-delay: 0.41999999999999993s; -o-transform: rotate(45deg); animation-delay: 0.41999999999999993s; transform: rotate(45deg);
}
#rotateG_05 { right: 0; top: 28px; -moz-animation-delay: 0.35s; -moz-transform: rotate(90deg); -webkit-animation-delay: 0.35s; -webkit-transform: rotate(90deg); -ms-animation-delay: 0.35s; -ms-transform: rotate(90deg); -o-animation-delay: 0.35s; -o-transform: rotate(90deg); animation-delay: 0.35s; transform: rotate(90deg);
}
#rotateG_06 { right: 8px; bottom: 7px; -moz-animation-delay: 0.27999999999999997s; -moz-transform: rotate(135deg); -webkit-animation-delay: 0.27999999999999997s; -webkit-transform: rotate(135deg); -ms-animation-delay: 0.27999999999999997s; -ms-transform: rotate(135deg); -o-animation-delay: 0.27999999999999997s; -o-transform: rotate(135deg); animation-delay: 0.27999999999999997s; transform: rotate(135deg);
}
#rotateG_07 { bottom: 0; left: 26px; -moz-animation-delay: 0.20999999999999996s; -moz-transform: rotate(180deg); -webkit-animation-delay: 0.20999999999999996s; -webkit-transform: rotate(180deg); -ms-animation-delay: 0.20999999999999996s; -ms-transform: rotate(180deg); -o-animation-delay: 0.20999999999999996s; -o-transform: rotate(180deg); animation-delay: 0.20999999999999996s; transform: rotate(180deg);
}
#rotateG_08 { left: 8px; bottom: 7px; -moz-animation-delay: 0.7s; -moz-transform: rotate(-135deg); -webkit-animation-delay: 0.7s; -webkit-transform: rotate(-135deg); -ms-animation-delay: 0.7s; -ms-transform: rotate(-135deg); -o-animation-delay: 0.7s; -o-transform: rotate(-135deg); animation-delay: 0.7s; transform: rotate(-135deg);
}
@-moz-keyframes fadeG { 0% { background-color: #4A4A4A; } 100% { background-color: #FFFFFF; }
}
@-webkit-keyframes fadeG { 0% { background-color: #4A4A4A; } 100% { background-color: #FFFFFF; }
}
@-ms-keyframes fadeG { 0% { background-color: #4A4A4A; } 100% { background-color: #FFFFFF; }
}
@-o-keyframes fadeG { 0% { background-color: #4A4A4A; } 100% { background-color: #FFFFFF; }
}
@keyframes fadeG { 0% { background-color: #4A4A4A; } 100% { background-color: #FFFFFF; }
}
.text { font-size: 12em; font-family: 'Helvetica'; text-align: center; color: #ddd; background: #fff; -webkit-transform: scale(1.5, 1.2); transform: scale(1.5, 1.2);
}
Exploring css spinners - Script Codes
Exploring css spinners - Script Codes
Home Page Home
Developer Akash Agrawal
Username akagr
Uploaded September 24, 2022
Rating 3
Size 3,569 Kb
Views 30,360
Do you need developer help for Exploring css spinners?

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!

Akash Agrawal (akagr) Script Codes
Name
A Pen by Akash Agrawal
Bliss
Angular UI
Simple AngularJs Tutorial
Infinite Scroll Angularjs
Promises in AngularJs
Create amazing captions 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!