Flat designed responsive preloader

Developer
Antonija Simic
Size
2,621 Kb
Views
22,264
  1. Flat designed responsive preloader Previews
  2. Flat designed responsive preloader HTML Codes
  3. Flat designed responsive preloader CSS Codes
  4. Flat designed responsive preloader JS Codes

How do I make an flat designed responsive preloader?

Flat designed responsive preloader. What is a flat designed responsive preloader? How do you make a flat designed responsive preloader? This script and codes were developed by Antonija Simic on 28 September 2022, Wednesday.

Flat designed responsive preloader Previews
IQ Test

Flat designed responsive preloader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat designed responsive preloader</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="up"></div> <div class="loading"></div> <div class="down"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flat designed responsive preloader - Script Codes CSS Codes

body,	html { height: 100%; width: 100%; padding: 0; margin: 0; overflow: hidden;	}	.wrapper { width: 100%; height: 100%;	}	.loading { margin: 10% auto; border-top: 6px solid #1abc9c; width: 125px; position: absolute; margin: 0 auto; left: 0; right: 0; top: 50%; z-index: 9999;	}	.spin { -webkit-animation: spin 1s infinite linear; -moz-animation: spin 2s infinite linear; -ms-animation: spin 2s infinite linear; -o-animation: spin 2s infinite linear; animation: spin 1s infinite linear;	}	@keyframes "spin" { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }	}	@-moz-keyframes spin { from { -moz-transform: rotate(0deg); transform: rotate(0deg); } to { -moz-transform: rotate(360deg); transform: rotate(360deg); }	}	@-webkit-keyframes "spin" { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }	}	@-ms-keyframes "spin" { from { -ms-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); transform: rotate(3670deg); }	}	@-o-keyframes "spin" { from { -o-transform: rotate(0deg); transform: rotate(0deg); } to { -o-transform: rotate(360deg); transform: rotate(360deg); }	}	.class { -webkit-animation: none; -moz-animation: none; -o-animation: none; animation: none;	}	.up { background-color: #34495e; width: 100%; height: 50%; position: absolute; top: 0;	}	.down { background-color: #34495e; width: 100%; height: 50%; position: absolute; bottom: 0;	}	.left-text-con,	.right-text-con { position: absolute; width: 50%; height: auto; top: 35%;	}	.left-text-con { left: -50%; text-align: right; margin-right: 10px;	}	.right-text-con { right: -50%;	}	.text { color: #34495e; font-size: 4em; margin: 0 auto;	}	@media (max-height: 300px) { .text { font-size: 3em; } .left-text-con, .right-text-con { top: 20%; }	}
.anchor-user { font-size: 3em; position: relative; bottom: 0; right: 20px; color: #000;
}
.anchor-user:hover { color: #039be5;; -webkit-transition: color .5s ease; -moz-transition: color .5s ease; -ms-transition: color .5s ease; -o-transition: color .5s ease; transition: color .5s ease;
}

Flat designed responsive preloader - Script Codes JS Codes

$(window).load(function() { $(".loading").addClass("spin"); setTimeout(function() { var currentPositon = $(".loading").css("transform"); console.log(currentPositon) $(".loading").addClass("class").css("transform", currentPositon).css("transform", "none") $(".loading").animate({ }, 500, function() { increaseWidth(); }); }, 1985); function increaseWidth() { $(".loading").animate({ width: "+=100%", }, 2500, function() { slide(); removeLine(); moveTextRight(); moveTextLeft(); }); } function removeLine() { $(".loading").animate({ width: "0%", }, 2500, function() {}); } function goUp() { $(".up").show(); $(".up").animate({ top: "-=50%" }, 2500, function() { $(this).hide(); }); } function goDown() { $(".down").show(); $(".down").animate({ bottom: "-=50%" }, 2500, function() { $(this).hide(); }); } function slide() { goUp(); goDown(); }
});
Flat designed responsive preloader - Script Codes
Flat designed responsive preloader - Script Codes
Home Page Home
Developer Antonija Simic
Username tonkec
Uploaded September 28, 2022
Rating 4.5
Size 2,621 Kb
Views 22,264
Do you need developer help for Flat designed responsive preloader?

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!

Antonija Simic (tonkec) Script Codes
Name
3D cube flip
Pure CSS hamburger icons transition
Simple text hover effect
Sass mixin library for text hover
Simple responsive slides
Static website for free workshop
Responsive sidebar revealed on click and key press
Pure CSS side reveal effect
Simple slides with moving bg
A Pen by Antonija Simic
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!