Swipe Preloader

Developer
Catcod
Size
3,122 Kb
Views
38,456
  1. Swipe Preloader Previews
  2. Swipe Preloader HTML Codes
  3. Swipe Preloader CSS Codes
  4. Swipe Preloader JS Codes

How do I make an swipe preloader?

Ease animated SVG swipe preloader.. What is a swipe preloader? How do you make a swipe preloader? This script and codes were developed by Catcod on 28 September 2022, Wednesday.

Swipe Preloader Previews
IQ Test

Swipe Preloader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Swipe Preloader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en">
<head> <meta charset="UTF-8" /> <title>Document</title>
</head>
<body> <svg version="1.1" id="pre" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="80px" viewBox="0 0 150 80" enable-background="new 0 0 150 80" xml:space="preserve"> <g> <path fill="#33ff66" d="M65.553,41.905h18.924v3.81H65.553V41.905z"/> <path fill="#33ff66" d="M65.553,49.524h18.924v3.81H65.553V49.524z"/> <path fill="#33ff66" d="M75.015,7.617c-5.299,0-9.462,4.191-9.462,9.524v13.334h18.924V17.142C84.477,11.808,80.314,7.617,75.015,7.617 z M80.692,26.666H69.338v-9.524c0-3.048,2.649-5.715,5.677-5.715c3.028,0,5.677,2.667,5.677,5.715V26.666z"/> <path fill="#33ff66" d="M91.948,15.237c-0.568-4.381-2.649-8.191-5.677-10.905c-3.028-2.714-7.002-4.334-11.355-4.334 c-4.353,0-8.327,1.619-11.355,4.334c-3.028,2.714-5.11,6.524-5.677,10.905v3.81v60.956h34.064V19.046V15.237z M88.163,76.193H61.669 V17.141c0-3.619,1.514-6.953,3.927-9.381c2.413-2.429,5.725-3.953,9.32-3.953s6.907,1.524,9.32,3.953s3.927,5.762,3.927,9.381 V76.193z"/> <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1.4s" values="-15,0;-15,0;15,0;-10,0;-15,0;" repeatCount="indefinite"/> </g> <path fill="#33ff66" d="M114.343,19.049h22.709L124.94,31.24l3.028,3.048L145,17.144L127.59,0l-3.028,3.048l12.49,12.191h-22.709 V19.049z"/> <path fill="#33ff66" d="M34.657,15.239H11.948L24.06,3.048L21.032,0L4,17.144l17.41,17.144l3.028-3.048l-12.49-12.191h22.709V15.239z"/>
</svg>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

Swipe Preloader - Script Codes CSS Codes

body { background:#182025 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDlGNzk4NTlDMTgzMTFFNEE1RkZBOEY5OTFEQjJFMkYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDlGNzk4NThDMTgzMTFFNEE1RkZBOEY5OTFEQjJFMkYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4OUQwNUE3OUMxODIxMUU0QTVGRkE4Rjk5MURCMkUyRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4OUQwNUE3QUMxODIxMUU0QTVGRkE4Rjk5MURCMkUyRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuoaoogAAAAeSURBVHjaYmFgYGhggAImECEvL4/gPHz4EMwBCDAALEoDiSy8X2AAAAAASUVORK5CYII=');
}
svg#pre { position: absolute; top: calc(50% - 40px); bottom: 0; left: calc(50% - 75px); right: 0;
}

Swipe Preloader - Script Codes JS Codes

// https://codepen.io/catcode/
Swipe Preloader - Script Codes
Swipe Preloader - Script Codes
Home Page Home
Developer Catcod
Username catcode
Uploaded September 28, 2022
Rating 3
Size 3,122 Kb
Views 38,456
Do you need developer help for Swipe 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!

Catcod (catcode) Script Codes
Name
Svg Preloader
Price
A Pen by catcod
IE 9 CSS border radius gradient
Price
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!