A Circular Form

Developer
Yogev Ahuvia
Size
8,003 Kb
Views
30,360
  1. A Circular Form Previews
  2. A Circular Form HTML Codes
  3. A Circular Form CSS Codes
  4. A Circular Form JS Codes

How do I make an a circular form?

This interface experiments with user input by implementing a circular form, that rotates as the user advances through it's path.. What is a a circular form? How do you make a a circular form? This script and codes were developed by Yogev Ahuvia on 11 September 2022, Sunday.

A Circular Form Previews
IQ Test

A Circular Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Circular Form</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.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! */ @charset "UTF-8";
/* A Circular Form © Yogev Ahuvia */
/* ============================== */
/* This interface experiments */
/* with user input by implementing */
/* a circular form, that rotates */
/* as the user advances through */
/* it's path. */
.wheel { width: 500px; height: 500px; top: 30px; left: 50%; margin-left: -250px; border-radius: 100%; position: absolute; transition-delay: 0s; transition-property: transform; transition-duration: 0.5s; transition-timing-function: ease-in-out; transform-origin: 50% 50%; transform: rotate(-22.5deg);
}
.wheel button.submit { font-family: 'Open Sans', sans-serif; outline: none; display: block; color: #eee; font-weight: 300; position: absolute; width: 100px; height: 100px; border-radius: 100%; border: 0; background: #222; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); z-index: 100; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; transition: opacity 1s, box-shadow 0.3s; pointer-events: none; opacity: 0;
}
.wheel button.submit:hover { box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
}
.wheel button.submit:focus { opacity: 1; pointer-events: auto;
}
ul { margin: 0; padding: 0;
}
ul > li { width: 250px; height: 250px; margin: 0; padding: 0; list-style-type: none; display: block; position: absolute; top: 0; left: 0; border-top-left-radius: 250px; border-top-right-radius: 0px; transform-origin: 100% 100%; pointer-events: none; transition-delay: 0s; transition-property: transform; transition-duration: 3s; transition-timing-function: ease-in-out;
}
ul > li:nth-child(1) { transform: rotate(0deg); z-index: 8; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF14B190', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI5OS40NDEzNCUiIHN0b3AtY29sb3I9IiMxNGIxOTAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, #14b190 178px, rgba(255, 255, 255, 0) 179px); background-image: -webkit-linear-gradient(45deg, #14b190 178px, rgba(255, 255, 255, 0) 179px); background-image: linear-gradient(45deg, #14b190 178px, rgba(255, 255, 255, 0) 179px);
}
ul > li:nth-child(2) { transform: rotate(45deg); z-index: 7; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF15B694', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI5OS40NDEzNCUiIHN0b3AtY29sb3I9IiMxNWI2OTQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, #15b694 178px, rgba(255, 255, 255, 0) 179px); background-image: -webkit-linear-gradient(45deg, #15b694 178px, rgba(255, 255, 255, 0) 179px); background-image: linear-gradient(45deg, #15b694 178px, rgba(255, 255, 255, 0) 179px);
}
ul > li:nth-child(3) { transform: rotate(90deg); z-index: 6; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF15BA97', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI5OS40NDEzNCUiIHN0b3AtY29sb3I9IiMxNWJhOTciLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, #15ba97 178px, rgba(255, 255, 255, 0) 179px); background-image: -webkit-linear-gradient(45deg, #15ba97 178px, rgba(255, 255, 255, 0) 179px); background-image: linear-gradient(45deg, #15ba97 178px, rgba(255, 255, 255, 0) 179px);
}
ul > li:nth-child(4) { transform: rotate(135deg); z-index: 5; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF16BF9B', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI5OS40NDEzNCUiIHN0b3AtY29sb3I9IiMxNmJmOWIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, #16bf9b 178px, rgba(255, 255, 255, 0) 179px); background-image: -webkit-linear-gradient(45deg, #16bf9b 178px, rgba(255, 255, 255, 0) 179px); background-image: linear-gradient(45deg, #16bf9b 178px, rgba(255, 255, 255, 0) 179px);
}
ul > li:nth-child(5) { transform: rotate(180deg); z-index: 4; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF16C39F', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI5OS40NDEzNCUiIHN0b3AtY29sb3I9IiMxNmMzOWYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, #16c39f 178px, rgba(255, 255, 255, 0) 179px); background-image: -webkit-linear-gradient(45deg, #16c39f 178px, rgba(255, 255, 255, 0) 179px); background-image: linear-gradient(45deg, #16c39f 178px, rgba(255, 255, 255, 0) 179px);
}
ul > li:nth-child(6) { transform: rotate(225deg); z-index: 3; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF17C8A3', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI5OS40NDEzNCUiIHN0b3AtY29sb3I9IiMxN2M4YTMiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, #17c8a3 178px, rgba(255, 255, 255, 0) 179px); background-image: -webkit-linear-gradient(45deg, #17c8a3 178px, rgba(255, 255, 255, 0) 179px); background-image: linear-gradient(45deg, #17c8a3 178px, rgba(255, 255, 255, 0) 179px);
}
ul > li:nth-child(7) { transform: rotate(270deg); z-index: 2; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF17CCA6', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI5OS40NDEzNCUiIHN0b3AtY29sb3I9IiMxN2NjYTYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, #17cca6 178px, rgba(255, 255, 255, 0) 179px); background-image: -webkit-linear-gradient(45deg, #17cca6 178px, rgba(255, 255, 255, 0) 179px); background-image: linear-gradient(45deg, #17cca6 178px, rgba(255, 255, 255, 0) 179px);
}
ul > li:nth-child(8) { transform: rotate(315deg); z-index: 1; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF18D1AA', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI5OS40NDEzNCUiIHN0b3AtY29sb3I9IiMxOGQxYWEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, #18d1aa 178px, rgba(255, 255, 255, 0) 179px); background-image: -webkit-linear-gradient(45deg, #18d1aa 178px, rgba(255, 255, 255, 0) 179px); background-image: linear-gradient(45deg, #18d1aa 178px, rgba(255, 255, 255, 0) 179px);
}
ul > li > input, ul > li > .sent-label { font-family: 'Open Sans'; color: #eee; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); outline: none; pointer-events: auto; display: block; position: absolute; top: 75%; left: 0px; width: 250px; border: 0; text-align: left; padding-left: 20px; background: none; transform-origin: 50%; transform: rotate(22.5deg);
}
ul > li > .sent-label { display: none; opacity: 0; font-size: 1.2em;
}
.closed li:nth-child(1) { transform: rotateX(0deg);
}
.closed li:nth-child(2) { transform: rotateX(0deg);
}
.closed li:nth-child(3) { transform: rotateX(0deg);
}
.closed li:nth-child(4) { transform: rotateX(0deg);
}
.closed li:nth-child(5) { transform: rotateX(0deg);
}
.closed li:nth-child(6) { transform: rotateX(0deg);
}
.closed li:nth-child(7) { transform: rotateX(0deg);
}
.closed li:nth-child(8) { transform: rotateX(0deg);
}
.sent.wheel { transition-delay: 0s, 3s; transition-property: transform, left; transition-duration: 1s, 0.5s; transition-timing-function: ease-in-out, ease-in; left: 150%;
}
.sent .sent-label { display: block; transition: opacity 1s; opacity: 1;
}
.sent input { pointer-events: none; transition: opacity 1s; opacity: 0;
}
.sent input::-webkit-input-placeholder { /* WebKit browsers */ opacity: 0;
}
.sent input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ opacity: 0;
}
.sent input::-moz-placeholder { /* Mozilla Firefox 19+ */ opacity: 0;
}
.sent input:-ms-input-placeholder { /* Internet Explorer 10+ */ opacity: 0;
}
.sent li:nth-child(1) { transform: rotateX(0deg);
}
.sent li:nth-child(2) { transform: rotateX(0deg);
}
.sent li:nth-child(3) { transform: rotateX(0deg);
}
.sent li:nth-child(4) { transform: rotateX(0deg);
}
.sent li:nth-child(5) { transform: rotateX(0deg);
}
.sent li:nth-child(6) { transform: rotateX(0deg);
}
.sent li:nth-child(7) { transform: rotateX(0deg);
}
.sent li:nth-child(8) { transform: rotateX(0deg);
}
html, body { width: 100%; height: 100%;
}
body { font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight: 300; background: #222; position: relative;
}
[type="submit"] { opacity: 0; pointer-events: none;
}
input::-webkit-input-placeholder { /* WebKit browsers */ color: #eee; opacity: 1;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #eee; opacity: 1;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #eee; opacity: 1;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #eee; opacity: 1;
}
input:not(:focus)::-webkit-input-placeholder { /* WebKit browsers */ opacity: 0.4;
}
input:not(:focus):-moz-placeholder { /* Mozilla Firefox 4 to 18 */ opacity: 0.4;
}
input:not(:focus)::-moz-placeholder { /* Mozilla Firefox 19+ */ opacity: 0.4;
}
input:not(:focus):-ms-input-placeholder { /* Internet Explorer 10+ */ opacity: 0.4;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrapper"> <div class="wheel closed"> <form onsubmit="return false;"> <ul> <li> <label class="sent-label">Thank You!</label> <input placeholder="Hi there! Press Tab..." tabindex="1"> </li> <li> <input placeholder="This is," tabindex="2"> </li> <li> <input placeholder="a circular form!" tabindex="3"> </li> <li> <input placeholder="It lets you input data," tabindex="4"> </li> <li> <input placeholder="or just read a list," tabindex="5"> </li> <li> <input placeholder="through a path." tabindex="6"> </li> <li> <input placeholder="When ready," tabindex="7"> </li> <li> <input placeholder="press Enter to Send." tabindex="8"> </li> </ul> <input type="submit"> </form> </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>

A Circular Form - Script Codes CSS Codes

@charset "UTF-8";
/* A Circular Form © Yogev Ahuvia */
/* ============================== */
/* This interface experiments */
/* with user input by implementing */
/* a circular form, that rotates */
/* as the user advances through */
/* it's path. */
.wheel { width: 500px; height: 500px; top: 30px; left: 50%; margin-left: -250px; border-radius: 100%; position: absolute; transition-delay: 0s; transition-property: transform; transition-duration: 0.5s; transition-timing-function: ease-in-out; transform-origin: 50% 50%; transform: rotate(-22.5deg);
}
.wheel button.submit { font-family: 'Open Sans', sans-serif; outline: none; display: block; color: #eee; font-weight: 300; position: absolute; width: 100px; height: 100px; border-radius: 100%; border: 0; background: #222; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); z-index: 100; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; transition: opacity 1s, box-shadow 0.3s; pointer-events: none; opacity: 0;
}
.wheel button.submit:hover { box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
}
.wheel button.submit:focus { opacity: 1; pointer-events: auto;
}
ul { margin: 0; padding: 0;
}
ul > li { width: 250px; height: 250px; margin: 0; padding: 0; list-style-type: none; display: block; position: absolute; top: 0; left: 0; border-top-left-radius: 250px; border-top-right-radius: 0px; transform-origin: 100% 100%; pointer-events: none; transition-delay: 0s; transition-property: transform; transition-duration: 3s; transition-timing-function: ease-in-out;
}
ul > li:nth-child(1) { transform: rotate(0deg); z-index: 8; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF14B190', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI5OS40NDEzNCUiIHN0b3AtY29sb3I9IiMxNGIxOTAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, #14b190 178px, rgba(255, 255, 255, 0) 179px); background-image: -webkit-linear-gradient(45deg, #14b190 178px, rgba(255, 255, 255, 0) 179px); background-image: linear-gradient(45deg, #14b190 178px, rgba(255, 255, 255, 0) 179px);
}
ul > li:nth-child(2) { transform: rotate(45deg); z-index: 7; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF15B694', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI5OS40NDEzNCUiIHN0b3AtY29sb3I9IiMxNWI2OTQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, #15b694 178px, rgba(255, 255, 255, 0) 179px); background-image: -webkit-linear-gradient(45deg, #15b694 178px, rgba(255, 255, 255, 0) 179px); background-image: linear-gradient(45deg, #15b694 178px, rgba(255, 255, 255, 0) 179px);
}
ul > li:nth-child(3) { transform: rotate(90deg); z-index: 6; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF15BA97', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI5OS40NDEzNCUiIHN0b3AtY29sb3I9IiMxNWJhOTciLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, #15ba97 178px, rgba(255, 255, 255, 0) 179px); background-image: -webkit-linear-gradient(45deg, #15ba97 178px, rgba(255, 255, 255, 0) 179px); background-image: linear-gradient(45deg, #15ba97 178px, rgba(255, 255, 255, 0) 179px);
}
ul > li:nth-child(4) { transform: rotate(135deg); z-index: 5; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF16BF9B', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI5OS40NDEzNCUiIHN0b3AtY29sb3I9IiMxNmJmOWIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, #16bf9b 178px, rgba(255, 255, 255, 0) 179px); background-image: -webkit-linear-gradient(45deg, #16bf9b 178px, rgba(255, 255, 255, 0) 179px); background-image: linear-gradient(45deg, #16bf9b 178px, rgba(255, 255, 255, 0) 179px);
}
ul > li:nth-child(5) { transform: rotate(180deg); z-index: 4; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF16C39F', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI5OS40NDEzNCUiIHN0b3AtY29sb3I9IiMxNmMzOWYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, #16c39f 178px, rgba(255, 255, 255, 0) 179px); background-image: -webkit-linear-gradient(45deg, #16c39f 178px, rgba(255, 255, 255, 0) 179px); background-image: linear-gradient(45deg, #16c39f 178px, rgba(255, 255, 255, 0) 179px);
}
ul > li:nth-child(6) { transform: rotate(225deg); z-index: 3; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF17C8A3', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI5OS40NDEzNCUiIHN0b3AtY29sb3I9IiMxN2M4YTMiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, #17c8a3 178px, rgba(255, 255, 255, 0) 179px); background-image: -webkit-linear-gradient(45deg, #17c8a3 178px, rgba(255, 255, 255, 0) 179px); background-image: linear-gradient(45deg, #17c8a3 178px, rgba(255, 255, 255, 0) 179px);
}
ul > li:nth-child(7) { transform: rotate(270deg); z-index: 2; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF17CCA6', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI5OS40NDEzNCUiIHN0b3AtY29sb3I9IiMxN2NjYTYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, #17cca6 178px, rgba(255, 255, 255, 0) 179px); background-image: -webkit-linear-gradient(45deg, #17cca6 178px, rgba(255, 255, 255, 0) 179px); background-image: linear-gradient(45deg, #17cca6 178px, rgba(255, 255, 255, 0) 179px);
}
ul > li:nth-child(8) { transform: rotate(315deg); z-index: 1; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF18D1AA', endColorstr='#FFFFFFFF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI5OS40NDEzNCUiIHN0b3AtY29sb3I9IiMxOGQxYWEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(45deg, #18d1aa 178px, rgba(255, 255, 255, 0) 179px); background-image: -webkit-linear-gradient(45deg, #18d1aa 178px, rgba(255, 255, 255, 0) 179px); background-image: linear-gradient(45deg, #18d1aa 178px, rgba(255, 255, 255, 0) 179px);
}
ul > li > input, ul > li > .sent-label { font-family: 'Open Sans'; color: #eee; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); outline: none; pointer-events: auto; display: block; position: absolute; top: 75%; left: 0px; width: 250px; border: 0; text-align: left; padding-left: 20px; background: none; transform-origin: 50%; transform: rotate(22.5deg);
}
ul > li > .sent-label { display: none; opacity: 0; font-size: 1.2em;
}
.closed li:nth-child(1) { transform: rotateX(0deg);
}
.closed li:nth-child(2) { transform: rotateX(0deg);
}
.closed li:nth-child(3) { transform: rotateX(0deg);
}
.closed li:nth-child(4) { transform: rotateX(0deg);
}
.closed li:nth-child(5) { transform: rotateX(0deg);
}
.closed li:nth-child(6) { transform: rotateX(0deg);
}
.closed li:nth-child(7) { transform: rotateX(0deg);
}
.closed li:nth-child(8) { transform: rotateX(0deg);
}
.sent.wheel { transition-delay: 0s, 3s; transition-property: transform, left; transition-duration: 1s, 0.5s; transition-timing-function: ease-in-out, ease-in; left: 150%;
}
.sent .sent-label { display: block; transition: opacity 1s; opacity: 1;
}
.sent input { pointer-events: none; transition: opacity 1s; opacity: 0;
}
.sent input::-webkit-input-placeholder { /* WebKit browsers */ opacity: 0;
}
.sent input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ opacity: 0;
}
.sent input::-moz-placeholder { /* Mozilla Firefox 19+ */ opacity: 0;
}
.sent input:-ms-input-placeholder { /* Internet Explorer 10+ */ opacity: 0;
}
.sent li:nth-child(1) { transform: rotateX(0deg);
}
.sent li:nth-child(2) { transform: rotateX(0deg);
}
.sent li:nth-child(3) { transform: rotateX(0deg);
}
.sent li:nth-child(4) { transform: rotateX(0deg);
}
.sent li:nth-child(5) { transform: rotateX(0deg);
}
.sent li:nth-child(6) { transform: rotateX(0deg);
}
.sent li:nth-child(7) { transform: rotateX(0deg);
}
.sent li:nth-child(8) { transform: rotateX(0deg);
}
html, body { width: 100%; height: 100%;
}
body { font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight: 300; background: #222; position: relative;
}
[type="submit"] { opacity: 0; pointer-events: none;
}
input::-webkit-input-placeholder { /* WebKit browsers */ color: #eee; opacity: 1;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #eee; opacity: 1;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #eee; opacity: 1;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #eee; opacity: 1;
}
input:not(:focus)::-webkit-input-placeholder { /* WebKit browsers */ opacity: 0.4;
}
input:not(:focus):-moz-placeholder { /* Mozilla Firefox 4 to 18 */ opacity: 0.4;
}
input:not(:focus)::-moz-placeholder { /* Mozilla Firefox 19+ */ opacity: 0.4;
}
input:not(:focus):-ms-input-placeholder { /* Internet Explorer 10+ */ opacity: 0.4;
}

A Circular Form - Script Codes JS Codes

function setWheelRotation(rotation) { $('.wheel').css('transform', 'rotate('+rotation+'deg)');
}
function onSubmit() { $('.wheel').addClass('sent'); setWheelRotation(697.5); setTimeout(function() { $('.wheel').removeClass('sent'); $('input').val(''); firstInputField().focus(); }, 5000); return false;
}
function firstInputField() { return $('.wheel li:first-child > input');
}
$('form').on('submit', function() { onSubmit();
});
$('input').on('focus', function() { var index = $(this).parent().index(); var rotation = -22.5 - (45 * index); setWheelRotation(rotation);
});
var lastTabIndex = $('[tabindex]').length;
$('[tabindex]').on('keydown', function(event) { if (event.keyCode == 9) { // Tab pressed event.preventDefault(); var currentElement = $(this).get(0); var curIndex = currentElement.tabIndex; if (event.shiftKey) { if (curIndex == 1) { return; } else { curIndex--; } } else { if (curIndex == lastTabIndex) { return; } else { curIndex++; } } $('[tabindex='+curIndex+']').focus(); }
});
$(document).ready(function() { $('.wheel').removeClass('closed'); firstInputField().focus();
});
A Circular Form - Script Codes
A Circular Form - Script Codes
Home Page Home
Developer Yogev Ahuvia
Username kindofone
Uploaded September 11, 2022
Rating 4.5
Size 8,003 Kb
Views 30,360
Do you need developer help for A Circular Form?

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!

Yogev Ahuvia (kindofone) Script Codes
Name
Triangles From Another Dimension
CSS-Only Countdown Clock
Thumbnail Animation Effects
Tears Of Happiness
Playing At Sunset
Subtle Buttons
Playing with fixed header
CSS Filter Glass
3D Cube of 3D Balls
Humble Progress
Create amazing SEO content 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!