Css3 loaders 4rd revision

Developer
Matheus Silva
Size
3,307 Kb
Views
18,216
  1. Css3 loaders 4rd revision Previews
  2. Css3 loaders 4rd revision HTML Codes
  3. Css3 loaders 4rd revision CSS Codes

How do I make an css3 loaders 4rd revision?

(c)matheus 2014 you are free to use it at any purposes just keep top coments say what you think about the new colors.. What is a css3 loaders 4rd revision? How do you make a css3 loaders 4rd revision? This script and codes were developed by Matheus Silva on 20 October 2022, Thursday.

Css3 loaders 4rd revision Previews
IQ Test

Css3 loaders 4rd revision - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>css3 loaders 4rd revision</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href='https://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* (c)matheus 2014 */
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
/*----1st loader----*/
.ring1{ width: 50px; height: 50px; border-radius: 100%; background-color: transparent; position: absolute; left: 62%; top: 52%; animation: rotate 3s infinite linear; border-left: 5px solid rgba(27, 188, 155, .5); border-bottom: 5px solid rgba(27, 188, 155, 1); border-right: 5px solid rgba(27, 188, 155, .5); border-top: 5px solid rgba(27, 188, 155, 1);
}
.ring2{ width: 40px; height: 40px; border-radius: 100%; background-color: transparent; animation: rotate 2s infinite linear; border-left: 5px solid rgba(27, 188, 155, .5); border-bottom: 5px solid rgba(27, 188, 155, .5); border-right: 5px solid rgba(27, 188, 155, .5); border-top: 5px solid rgba(27, 188, 155, 1);
}
.ring3{ width: 30px; height: 30px; border-radius: 100%; background-color: transparent; animation: rotate 1s infinite linear; border-left: 5px solid rgba(27, 188, 155, .5); border-bottom: 5px solid rgba(27, 188, 155, .5); border-right: 5px solid rgba(27, 188, 155, .5); border-top: 5px solid rgba(27, 188, 155, 1);
}
.ring4{ width: 20px; height: 20px; border-radius: 100%; background-color: transparent; animation: rotate .90s infinite linear; border-left: 5px solid rgba(27, 188, 155,.5); border-bottom: 5px solid rgba(27, 188, 155,.5); border-right: 5px solid rgba(27, 188, 155,.5); border-top: 5px solid rgba(27, 188, 155, 1);
}
@keyframes rotate { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); }
}
/*----2nd loader code----*/
.con{ width: 100px; height: 100px; background-color: transparent; border-radius: 100px; position: absolute; left: 36%; top: 45%; background: #22313f;
}
.con:before{ content: ''; width: 20px; height: 35px; background-color: #1BBC9B; border-radius: 10px; position: absolute; left: 39%; top: 26%; animation: loader-2 1.5s infinite linear; animation-direction: reverse; transform-origin: 50% 50%;
}
.con:after{ content: 'Loading'; color: #1BBC9B; position: absolute; left: 23.5%; top: 66%; font-family: 'Source Sans Pro', sans-serif; font-wheight: bold;
}
@keyframes loader-2{ 0%{ transform: rotateY(90deg); left: 50; } 50%{ transform: rotateY(-90deg); } 100%{ transform: rotateY(90deg); }
}
/*----3rd code----*/
.pill{ width: 100px; height: 100px; background-color: transparent; border-radius: 100px; position: absolute; left: 26%; top: 45%; background: #22313f;
}
.pill:before{ content: ''; width: 20px; height: 35px; background-color: #1BBC9B; border-radius: 10px; position: absolute; left: 39%; top: 6%; animation: loader-3 1.5s infinite linear; animation-direction: reverse; transform-origin: 50% 50%; trasnsform: rotate(180deg);
}
/*.pill:after{ content: 'Loading'; color: #1BBC9B; position: absolute; left: 23.5%; top: 66%; font-family: 'Source Sans Pro', sans-serif; font-wheight: bold;
}*/
@keyframes loader-3{ 0%{ height: 35px; top: 6%; } 50%{ height: 15px; top: 76%; } 100%{ height: 35px; top: 6%; }
}
/*----misc code----*/
body{ text-align: center; background-color: #4B77BE;
}
.ty{ color: rgba(27, 188, 155,.5); transition: .5s font-size; font-size: 20px; text-align: center; font-family: 'Audiowide', cursive;
}
.ty:hover{ color: rgba(27, 188, 155,1); cursor: default; font-size: 30px;
}
.con-holder{ width: 50px; heght: 50px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <div class="ring1"> <div class="ring2"> <div class="ring3"> <div class="ring4"> </div> </div> </div> </div>
</div><br>
<div class="con"></div>
<div class="pill"></div>
<div class="ty">thank you<br>for the support</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Css3 loaders 4rd revision - Script Codes CSS Codes

/* (c)matheus 2014 */
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
/*----1st loader----*/
.ring1{ width: 50px; height: 50px; border-radius: 100%; background-color: transparent; position: absolute; left: 62%; top: 52%; animation: rotate 3s infinite linear; border-left: 5px solid rgba(27, 188, 155, .5); border-bottom: 5px solid rgba(27, 188, 155, 1); border-right: 5px solid rgba(27, 188, 155, .5); border-top: 5px solid rgba(27, 188, 155, 1);
}
.ring2{ width: 40px; height: 40px; border-radius: 100%; background-color: transparent; animation: rotate 2s infinite linear; border-left: 5px solid rgba(27, 188, 155, .5); border-bottom: 5px solid rgba(27, 188, 155, .5); border-right: 5px solid rgba(27, 188, 155, .5); border-top: 5px solid rgba(27, 188, 155, 1);
}
.ring3{ width: 30px; height: 30px; border-radius: 100%; background-color: transparent; animation: rotate 1s infinite linear; border-left: 5px solid rgba(27, 188, 155, .5); border-bottom: 5px solid rgba(27, 188, 155, .5); border-right: 5px solid rgba(27, 188, 155, .5); border-top: 5px solid rgba(27, 188, 155, 1);
}
.ring4{ width: 20px; height: 20px; border-radius: 100%; background-color: transparent; animation: rotate .90s infinite linear; border-left: 5px solid rgba(27, 188, 155,.5); border-bottom: 5px solid rgba(27, 188, 155,.5); border-right: 5px solid rgba(27, 188, 155,.5); border-top: 5px solid rgba(27, 188, 155, 1);
}
@keyframes rotate { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); }
}
/*----2nd loader code----*/
.con{ width: 100px; height: 100px; background-color: transparent; border-radius: 100px; position: absolute; left: 36%; top: 45%; background: #22313f;
}
.con:before{ content: ''; width: 20px; height: 35px; background-color: #1BBC9B; border-radius: 10px; position: absolute; left: 39%; top: 26%; animation: loader-2 1.5s infinite linear; animation-direction: reverse; transform-origin: 50% 50%;
}
.con:after{ content: 'Loading'; color: #1BBC9B; position: absolute; left: 23.5%; top: 66%; font-family: 'Source Sans Pro', sans-serif; font-wheight: bold;
}
@keyframes loader-2{ 0%{ transform: rotateY(90deg); left: 50; } 50%{ transform: rotateY(-90deg); } 100%{ transform: rotateY(90deg); }
}
/*----3rd code----*/
.pill{ width: 100px; height: 100px; background-color: transparent; border-radius: 100px; position: absolute; left: 26%; top: 45%; background: #22313f;
}
.pill:before{ content: ''; width: 20px; height: 35px; background-color: #1BBC9B; border-radius: 10px; position: absolute; left: 39%; top: 6%; animation: loader-3 1.5s infinite linear; animation-direction: reverse; transform-origin: 50% 50%; trasnsform: rotate(180deg);
}
/*.pill:after{ content: 'Loading'; color: #1BBC9B; position: absolute; left: 23.5%; top: 66%; font-family: 'Source Sans Pro', sans-serif; font-wheight: bold;
}*/
@keyframes loader-3{ 0%{ height: 35px; top: 6%; } 50%{ height: 15px; top: 76%; } 100%{ height: 35px; top: 6%; }
}
/*----misc code----*/
body{ text-align: center; background-color: #4B77BE;
}
.ty{ color: rgba(27, 188, 155,.5); transition: .5s font-size; font-size: 20px; text-align: center; font-family: 'Audiowide', cursive;
}
.ty:hover{ color: rgba(27, 188, 155,1); cursor: default; font-size: 30px;
}
.con-holder{ width: 50px; heght: 50px;
}
Css3 loaders 4rd revision - Script Codes
Css3 loaders 4rd revision - Script Codes
Home Page Home
Developer Matheus Silva
Username matheusxaviersi
Uploaded October 20, 2022
Rating 4
Size 3,307 Kb
Views 18,216
Do you need developer help for Css3 loaders 4rd revision?

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!

Matheus Silva (matheusxaviersi) Script Codes
Name
Login page
Markup playground
Menu concept
Simple syntax higlighter
Server satus indicator
Mug foundation-pre loader
Sample page
Rapier script playground
Keytester
Just some fun with 3d transforms
Create amazing blog posts 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!