Zenman Intro Loader

Developer
Tcmulder
Size
7,677 Kb
Views
50,600
  1. Zenman Intro Loader Previews
  2. Zenman Intro Loader HTML Codes
  3. Zenman Intro Loader CSS Codes
  4. Zenman Intro Loader JS Codes

How do I make an zenman intro loader?

This is an example of what snap.svg could do for the Zenman website's hero overlay. Inspired by http://codepen.io/dominicmagnifico/details/orepf. What is a zenman intro loader? How do you make a zenman intro loader? This script and codes were developed by Tcmulder on 05 August 2022, Friday.

Zenman Intro Loader Previews
IQ Test

Zenman Intro Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Zenman Intro Loader</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Varela+Round'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="svg-animation">
<svg id="logo" class="logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" xml:space="preserve">
<path id="zenman" class="zenman" d="M30.435,49.849c0.108-0.105,31.666-30.872-0.004-30.872c-31.654,0-0.139,30.743-0.004,30.872	c-14.966-5.686-29.926-11.366-29.926,0c0,11.372,14.96,5.69,29.93,0h0.002c14.967,5.69,29.932,11.372,29.932,0	C60.365,38.482,45.4,44.172,30.435,49.849 M30.431,18.331c3.652,0,6.608-3.963,6.608-8.843c0-4.891-2.956-8.855-6.608-8.855	c-3.65,0-6.607,3.965-6.607,8.855C23.824,14.368,26.781,18.331,30.431,18.331"/>
</svg>
<svg id="circle" class="circle" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve"> <path id="dots" class="dots" d="M590.905,343.249c-1.96-0.302-3.289-2.106-2.981-4.034c0.217-1.943,1.993-3.324,3.958-3.078c1.968,0.242,3.383,2.057,3.156,4.06C594.723,342.179,592.863,343.545,590.905,343.249M583.972,376.257c-1.914-0.518-3.058-2.471-2.55-4.359c0.51-1.89,2.485-3.038,4.414-2.575c1.928,0.469,3.067,2.422,2.545,4.365C587.862,375.625,585.885,376.779,583.972,376.257M573.354,408.278c-1.84-0.739-2.771-2.821-2.076-4.646c0.69-1.832,2.767-2.76,4.626-2.071c1.859,0.683,2.791,2.767,2.076,4.646C577.27,408.086,575.198,409.014,573.354,408.278M559.098,438.851c-1.763-0.957-2.34-3.073-1.477-4.823c0.868-1.756,3.009-2.446,4.779-1.554c1.775,0.895,2.482,3.08,1.588,4.88C563.096,439.156,560.822,439.782,559.098,438.851M541.405,467.567c-1.627-1.134-2.041-3.358-0.927-4.966s3.363-2.022,5.018-0.938c1.655,1.09,2.074,3.314,0.925,4.972C545.277,468.288,543.033,468.707,541.405,467.567M520.633,494.145c-1.484-1.314-1.667-3.59-0.404-5.084c1.263-1.492,3.521-1.667,5.041-0.4c1.521,1.272,1.706,3.552,0.404,5.085C524.374,495.279,522.112,495.462,520.633,494.145M496.899,518.118c-1.324-1.47-1.216-3.722,0.249-5.016c1.438-1.322,3.651-1.297,5.027,0.147c1.359,1.426,1.329,3.764-0.15,5.124C500.521,519.706,498.224,519.593,496.899,518.118M470.631,539.285c-1.149-1.618-0.805-3.861,0.778-5.011c1.579-1.154,3.832-0.804,5.026,0.779c1.198,1.578,0.848,3.824-0.777,5.011C474.033,541.248,471.782,540.897,470.631,539.285M442.159,557.379c-0.946-1.716-0.35-3.91,1.324-4.916c1.682-0.997,3.864-0.415,4.875,1.287c1.009,1.711,0.425,3.926-1.307,4.946C445.326,559.731,443.131,559.135,442.159,557.379M411.756,571.997c-0.755-1.837,0.104-3.921,1.91-4.66c1.822-0.716,3.911,0.076,4.713,1.879c0.813,1.819-0.01,3.982-1.884,4.717C414.636,574.699,412.515,573.832,411.756,571.997M379.914,583.113c-0.54-1.908,0.539-3.906,2.411-4.469c1.872-0.557,3.874,0.523,4.471,2.417c0.595,1.889-0.485,3.892-2.411,4.468C382.453,586.102,380.451,585.021,379.914,583.113M347.004,590.53c-0.312-1.933,0.994-3.782,2.907-4.172c1.919-0.375,3.778,0.907,4.153,2.855c0.372,1.948-0.928,3.839-2.905,4.217C349.189,593.83,347.325,592.508,347.004,590.53M313.451,594.018c-0.089-1.978,1.42-3.649,3.373-3.724c1.953-0.047,3.645,1.319,3.798,3.326c0.147,1.945-1.352,3.795-3.363,3.84C315.246,597.543,313.542,596,313.451,594.018M279.722,593.736c0.132-1.978,1.821-3.487,3.772-3.363c1.952,0.118,3.473,1.824,3.397,3.807c-0.077,1.982-1.766,3.487-3.773,3.363C281.111,597.42,279.591,595.719,279.722,593.736M246.23,589.707c0.355-1.943,2.207-3.274,4.135-2.959c1.93,0.315,3.251,2.165,2.952,4.123c-0.3,1.963-2.147,3.289-4.136,2.964C247.197,593.504,245.877,591.66,246.23,589.707M213.42,581.88c0.573-1.889,2.545-2.929,4.44-2.451c1.887,0.501,2.995,2.472,2.475,4.382c-0.519,1.914-2.517,3.043-4.461,2.516C213.923,585.836,212.842,583.789,213.42,581.88M181.751,570.261c0.79-1.819,2.884-2.663,4.674-1.879c1.78,0.809,2.66,2.875,1.928,4.7c-0.742,1.854-2.862,2.762-4.696,1.929C181.813,574.206,180.96,572.081,181.751,570.261M151.592,555.15c0.992-1.719,3.181-2.333,4.889-1.381c1.706,0.951,2.322,3.142,1.381,4.887c-0.944,1.741-3.134,2.362-4.889,1.381C151.216,559.057,150.597,556.866,151.592,555.15M123.358,536.69c1.192-1.603,3.369-1.874,4.997-0.789c1.607,1.11,1.988,3.334,0.852,4.959c-1.136,1.628-3.398,2.018-5.053,0.868C122.478,540.611,122.188,538.269,123.358,536.69M97.449,515.09c1.356-1.445,3.616-1.539,5.045-0.207c1.43,1.331,1.525,3.62,0.209,5.104c-1.313,1.484-3.573,1.578-5.045,0.207S96.094,516.54,97.449,515.09M74.087,490.757c1.51-1.287,3.787-1.145,5.085,0.32s1.152,3.724-0.32,5.05c-1.475,1.324-3.752,1.184-5.086-0.32C72.434,494.3,72.576,492.039,74.087,490.757M53.706,463.879c1.646-1.104,3.853-0.681,4.927,0.957c1.131,1.593,0.77,3.797-0.85,4.951c-1.607,1.148-3.894,0.77-5.057-0.868C51.617,467.237,52.06,464.979,53.706,463.879M36.488,434.87c1.762-0.912,3.931-0.246,4.843,1.479c0.914,1.733,0.244,3.911-1.491,4.873c-1.734,0.964-3.903,0.296-4.843-1.484C34.058,437.957,34.725,435.777,36.488,434.87M22.612,404.121c1.853-0.705,3.959,0.192,4.701,2.002c0.74,1.811-0.149,3.887-1.979,4.646c-1.836,0.755-3.939-0.143-4.702-2.007C19.873,406.902,20.759,404.821,22.612,404.121M12.507,371.937c1.921-0.483,3.857,0.661,4.325,2.56c0.444,1.903-0.568,3.839-2.5,4.384c-1.883,0.533-3.981-0.571-4.439-2.529C9.411,374.397,10.58,372.42,12.507,371.937M6.091,338.82c1.964-0.262,3.783,1.097,4.055,3.032c0.275,1.934-1.094,3.764-3.048,4.079c-1.959,0.315-3.775-1.041-4.058-3.033C2.76,340.906,4.123,339.081,6.091,338.82M3.45,305.19c1.981-0.034,3.653,1.519,3.732,3.472c0.078,1.953-1.467,3.61-3.447,3.704s-3.651-1.46-3.732-3.472C-0.075,306.882,1.467,305.225,3.45,305.19M4.669,271.479c1.979,0.186,3.358,1.911,3.274,3.865c-0.118,1.949-1.823,3.426-3.8,3.296c-1.98-0.133-3.484-1.867-3.361-3.874C0.875,272.756,2.702,271.291,4.669,271.479M9.732,238.128c1.939,0.41,3.178,2.292,2.765,4.204c-0.447,1.901-2.238,3.188-4.197,2.832c-1.942-0.355-3.311-2.259-2.851-4.22C5.874,238.979,7.788,237.716,9.732,238.128M18.519,205.562c1.879,0.631,2.916,2.647,2.315,4.509c-0.601,1.858-2.631,2.898-4.525,2.323c-1.899-0.575-2.937-2.594-2.318-4.51C14.615,205.97,16.637,204.931,18.519,205.562M30.925,174.19c1.79,0.841,2.616,2.978,1.835,4.768c-0.783,1.793-2.894,2.603-4.712,1.812c-1.817-0.791-2.641-2.924-1.836-4.77C27.019,174.158,29.125,173.347,30.925,174.19M46.983,144.521c1.687,1.043,2.214,3.233,1.183,4.892c-1.071,1.636-3.161,2.26-4.9,1.252c-1.696-0.979-2.362-3.252-1.267-4.938C43.065,144.019,45.297,143.478,46.983,144.521M66.25,116.834c1.556,1.227,1.857,3.479,0.667,5.033c-1.192,1.55-3.446,1.848-5.038,0.665c-1.593-1.184-1.892-3.436-0.666-5.031C62.437,115.904,64.692,115.607,66.25,116.834M88.521,91.497c1.409,1.397,1.396,3.616,0.085,5.069c-1.33,1.431-3.585,1.492-5.031,0.136c-1.45-1.356-1.51-3.648-0.14-5.118C84.784,90.089,87.112,90.102,88.521,91.497M113.577,68.914c1.24,1.545,1.012,3.795-0.51,5.02c-1.521,1.233-3.807,0.985-5.075-0.507c-1.303-1.53-1.063-3.766,0.499-5.03C110.059,67.131,112.334,67.366,113.577,68.914M140.979,49.238c1.056,1.677,0.591,3.909-1.043,4.985c-1.634,1.073-3.851,0.608-4.956-1.038c-1.104-1.646-0.639-3.879,1.043-4.985C137.701,47.092,139.921,47.557,140.979,49.238M170.472,32.866c0.86,1.791,0.113,3.896-1.645,4.745c-1.73,0.914-3.87,0.224-4.78-1.535c-0.908-1.763-0.203-3.952,1.575-4.894C167.432,30.306,169.615,31.083,170.472,32.866M201.643,19.974c0.648,1.873-0.318,3.921-2.161,4.573c-1.844,0.649-3.908-0.329-4.611-2.182c-0.701-1.855,0.266-3.901,2.163-4.573C198.932,17.123,200.994,18.1,201.643,19.974M234.067,10.668c0.43,1.937-0.761,3.886-2.659,4.351c-1.898,0.464-3.831-0.717-4.315-2.64c-0.484-1.923,0.707-3.87,2.662-4.35C231.706,7.551,233.638,8.732,234.067,10.668M267.359,5.229c0.207,1.985-1.212,3.684-3.151,3.922c-1.936,0.275-3.716-1.099-3.977-3.062c-0.26-1.968,1.142-3.79,3.133-4.071C265.362,1.773,267.154,3.27,267.359,5.229M301.053,3.631c-0.02,1.983-1.62,3.573-3.577,3.554c-1.954-0.023-3.567-1.657-3.604-3.611c-0.034-2.01,1.566-3.593,3.575-3.573C299.461,0.02,301.072,1.644,301.053,3.631M334.717,5.785c-0.244,1.966-2.018,3.388-3.958,3.168c-1.94-0.219-3.365-1.997-3.179-3.971c0.188-1.975,1.956-3.395,3.956-3.17C333.535,2.041,334.959,3.818,334.717,5.785M367.93,11.686c-0.466,1.927-2.395,3.156-4.306,2.742c-1.908-0.412-3.124-2.32-2.715-4.26c0.409-1.942,2.338-3.168,4.306-2.742C367.178,7.848,368.396,9.757,367.93,11.686M400.215,21.46c-0.686,1.86-2.72,2.808-4.547,2.116c-1.859-0.605-2.855-2.616-2.229-4.497c0.631-1.879,2.694-2.903,4.605-2.281C399.929,17.511,400.9,19.6,400.215,21.46M431.177,34.848c-0.893,1.771-3.038,2.503-4.789,1.635c-1.751-0.869-2.485-3.033-1.645-4.826c0.841-1.797,2.986-2.527,4.786-1.633C431.329,30.917,432.069,33.079,431.177,34.848M460.446,51.622c-1.093,1.657-3.319,2.162-4.981,1.127c-1.656-1.033-2.154-3.243-1.114-4.929c1.046-1.687,3.27-2.192,4.979-1.125C461.033,47.761,461.534,49.966,460.446,51.622M487.531,71.727c-1.27,1.521-3.512,1.731-5.001,0.469c-1.491-1.263-1.8-3.439-0.56-5.012c1.211-1.54,3.544-1.866,5.082-0.566C488.589,67.916,488.804,70.205,487.531,71.727M512.205,94.732c-1.433,1.369-3.709,1.343-5.072-0.055c-1.366-1.399-1.339-3.677,0.052-5.086c1.4-1.409,3.669-1.383,5.072,0.055C513.665,91.089,513.64,93.364,512.205,94.732M534.141,120.356c-1.57,1.188-3.789,0.882-5.04-0.624c-1.223-1.522-0.964-3.765,0.582-5.004c1.544-1.243,3.822-0.978,5.085,0.588C536.05,116.87,535.734,119.152,534.141,120.356M552.941,148.364c-1.707,1.008-3.896,0.462-4.891-1.22c-0.988-1.689-0.448-3.901,1.211-4.946c1.696-1.07,3.901-0.533,4.917,1.204C555.205,145.135,554.652,147.354,552.941,148.364M568.516,178.286c-1.811,0.808-3.95,0.028-4.781-1.742c-0.826-1.773-0.047-3.903,1.738-4.766c1.785-0.858,3.928-0.077,4.778,1.746C571.107,175.347,570.328,177.48,568.516,178.286M580.531,209.809c-1.916,0.602-3.824-0.459-4.492-2.297c-0.651-1.844,0.343-3.864,2.214-4.513c1.874-0.648,3.938,0.363,4.606,2.26C583.547,207.152,582.398,209.223,580.531,209.809M588.805,242.511c-1.945,0.371-3.827-0.882-4.197-2.798c-0.372-1.922,0.905-3.825,2.831-4.252c1.945-0.432,3.822,0.823,4.202,2.797C592.022,240.233,590.75,242.137,588.805,242.511M593.337,275.935c-1.976,0.148-3.726-1.312-3.901-3.258c-0.175-1.947,1.282-3.688,3.255-3.896c1.971-0.203,3.719,1.256,3.901,3.261C596.771,274.043,595.319,275.786,593.337,275.935M594.086,309.663c-1.979-0.078-3.575-1.726-3.551-3.679c0.02-1.95,1.647-3.521,3.63-3.502c1.987,0.021,3.575,1.662,3.549,3.675C597.694,308.169,596.068,309.737,594.086,309.663"/>
</svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.1.0/snap.svg-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Zenman Intro Loader - Script Codes CSS Codes

html { width: 100%; height: 100%;
}
body { width: 100%; height: 100%; overflow: hidden; background: #ccc; text-align: center; background: url("http://www.tcmulder.com/codepen/zen-spin/zen-bg.jpg") center no-repeat; background-size: cover;
}
.svg-animation { display: inline-block; position: relative; width: 90%; height: 90%; margin-top: 3%; max-width: 600px; max-height: 600px;
}
.logo { position: absolute; top: 0; left: 0; right: 0; height: 100%; width: 100%; padding-bottom: 2.5em; font-size: .22em;
}
.circle { position: absolute; width: 100%; height: 100%; left: 0;
}

Zenman Intro Loader - Script Codes JS Codes

var zen = function(){ var logo = Snap.select('.logo'); logo.attr({ fill:'#fff' }); logo.select('.zenman').transform('s.2,t98,105'); logo.text(20, 10, "Good Design is Obvious, Great Design is Zenman").attr({ 'fill': '#fc8e3b', 'font-family': 'Varela Round', 'text-transform': 'uppercase', 'text-shadow': '0 0 5px #000' }).transform('t-19,89.5'); var circle = Snap.select('.circle'); var svgs = [circle]; var rot = function(thisCircle, per, dir){ var dots = thisCircle.select('.dots'); var scale = dots.transform().localMatrix.d; dots.stop().animate( { transform: 's'+scale+', t0,0r' + (360 * dir) }, 100000 * (per / 100), function(){ dots.transform('s'+scale+',t0,0r0'); rot(thisCircle,per); } ); } var rings = 5; for (var i = 0; i <= rings; i++) { svgs.push(circle.clone()); var per = i/rings; var pos = 300 - (300 * per); var speed = Math.floor(Math.random() * 100) + 25; var dir = Math.random() < 0.5 ? -1 : 1; var scale = per * .9; svgs[i].attr({ fill: '#fff' }); svgs[i].select('.dots').transform('s'+scale+',t0,0r0'); rot(svgs[i], speed, dir); }
}
zen();
Zenman Intro Loader - Script Codes
Zenman Intro Loader - Script Codes
Home Page Home
Developer Tcmulder
Username tcmulder
Uploaded August 05, 2022
Rating 4.5
Size 7,677 Kb
Views 50,600
Do you need developer help for Zenman Intro Loader?

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!

Tcmulder (tcmulder) Script Codes
Name
Zoom
Jeet
Half Flip
Nav Back There
Percentage Animation
Toggle-to-Menu Concept
Background Wipe
Divs with Aspect Ratio
Wipe Slider
Stickup Sticky Nav jQuery Plugin
Create amazing art & images 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!