{"loaderData":{"0":null,"0-2":{"total":7189,"projects":[{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"7b425b","snapshot":null,"tags":null,"title":"checkbox by Alaner-xs","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":1111,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n \n \n \n Checkbox\n \n

\n\n\n","css":"/* add this to your :root variables */\n.checkbox {\n --light: rgba(207, 205, 205, 0.425);\n --primary-color: #8c00ff;\n --duration: 0.3s;\n --ease: ease-in-out;\n}\n\n/* hide checkbox */\n.checkbox input[type=\"checkbox\"] {\n display: none;\n}\n\n.checkbox label {\n align-items: center;\n cursor: pointer;\n display: flex;\n}\n\n.checkbox label span {\n margin-left: 8px;\n}\n\n.checkbox svg {\n height: 30px;\n width: 30px;\n}\n\n/* svg rectangle property */\n.checkbox svg > rect {\n fill: var(--light);\n stroke: #8c00ff;\n /* responsive values */\n stroke-dasharray: 400%;\n stroke-dashoffset: 400%;\n transition: var(--duration) stroke-dashoffset var(--ease);\n}\n\n/* svg check property */\n.checkbox svg path {\n stroke: var(--primary-color);\n /* responsive values */\n stroke-dasharray: 100%;\n stroke-dashoffset: 100%;\n transition: var(--duration) stroke-dashoffset var(--ease);\n}\n\n.checkbox input[type=\"checkbox\"]:checked + label svg > rect,\n .checkbox input[type=\"checkbox\"]:checked + label svg path {\n stroke-dashoffset: 0;\n}\n"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"906fdc","snapshot":null,"tags":null,"title":"checkbox by gharsh11032000","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":1160,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n","css":"/* Hide the default checkbox */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.container {\n display: block;\n position: relative;\n cursor: pointer;\n font-size: 20px;\n user-select: none;\n}\n\n/* Create a custom checkbox */\n.checkmark {\n position: relative;\n top: 0;\n left: 0;\n height: 1.3em;\n width: 1.3em;\n border: 2px solid #414141;\n transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n/* When the checkbox is checked */\n.container input:checked ~ .checkmark {\n background: #0974f1;\n border-color: #0974f1;\n filter: drop-shadow(5px 5px);\n}\n\n/* Create the checkmark/indicator (hidden when not checked) */\n.checkmark:after {\n content: \"\";\n position: absolute;\n}\n\n.container .checkmark:after {\n inset: 0;\n margin: auto;\n width: 0.5em;\n height: 0.5em;\n background-color: #414141;\n border-width: 0 0.15em 0.15em 0;\n}\n\n/* Show the checkmark when checked */\n.container input:checked ~ .checkmark:after {\n width: 0.25em;\n height: 0.5em;\n border: solid #414141;\n border-width: 0 0.15em 0.15em 0;\n border-color: white;\n background-color: transparent;\n transform: rotate(45deg);\n}\n\n"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"ff5e96","snapshot":null,"tags":null,"title":"checkbox by Smit-Prajapati","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":41,"cssLen":793,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".checkbox {\n appearance: none;\n width: 30px;\n aspect-ratio: 1;\n border-radius: 8px;\n border: 2px solid black;\n position: relative;\n transition: all 0.2s ease-in-out;\n}\n\n.checkbox::before {\n font-family: \"Quicksand\", sans-serif;\n position: absolute;\n bottom: -4px;\n left: 1px;\n content: \"✔\";\n font-size: 40px;\n color: rgb(255, 153, 0);\n transform: scale(0);\n transition: all 0.2s ease-in-out;\n}\n\n.checkbox:checked::before {\n animation: zoom 0.5s ease-in-out;\n transform: scale(1);\n}\n\n@keyframes zoom {\n 0% {\n transform: scale(0);\n }\n\n 20% {\n transform: scale(1.5);\n }\n\n 40% {\n transform: scale(0.5);\n }\n\n 50% {\n transform: scale(1);\n }\n\n 70% {\n transform: scale(1.2);\n }\n\n 90% {\n transform: scale(0.8);\n }\n\n 100% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"1d9abd","snapshot":null,"tags":null,"title":"checkbox by Praashoo7","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1318,"cssLen":1605,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n \n

Liked!

\n","css":"/* Hide the default checkbox */\n.container input {\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.container {\n display: block;\n position: relative;\n cursor: pointer;\n font-size: 20px;\n user-select: none;\n}\n\n/* Create a custom checkbox */\n.checkmark {\n position: relative;\n top: 0;\n left: 0;\n height: 3em;\n width: 3em;\n background-color: #171717;\n border-radius: 10px;\n transition: .2s ease-in-out;\n z-index: 2;\n}\n\n.like {\n position: relative;\n font-size: 0.8em;\n top: -3.5em;\n text-align: center;\n z-index: -1;\n}\n\n.icon {\n margin: 0.2em;\n fill: white;\n transition: .4s ease-in-out;\n}\n\n.checkmark:hover {\n background-color: white;\n}\n\n.checkmark:hover .icon {\n fill: black;\n transform: rotate(-8deg);\n transform-origin: bottom left;\n}\n\n/* When the checkbox is checked, add a blue background */\n.container input:checked ~ .checkmark {\n background-color: limegreen;\n}\n\n.container input:checked ~ .like {\n color: white;\n animation: 0.6s up_3951;\n}\n\n.container input:checked ~ .checkmark .icon {\n fill: white;\n transform: none;\n animation: 0.5s jump_3951;\n}\n\n/* Create the checkmark/indicator (hidden when not checked) */\n.checkmark:after {\n content: \"\";\n position: absolute;\n display: none;\n}\n\n/* Show the checkmark when checked */\n.container input:checked ~ .checkmark:after {\n display: block;\n}\n\n@keyframes up_3951 {\n 100% {\n transform: translateY(-2em);\n }\n}\n\n@keyframes jump_3951 {\n 50% {\n transform-origin: center;\n transform: translateY(-0.5em) rotate(-8deg);\n }\n\n 100% {\n transform-origin: center;\n transform: translateY(0em);\n }\n}"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"0b8f7f","snapshot":null,"tags":null,"title":"checkbox by mobinkakei","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":143,"cssLen":642,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n\n","css":".checkmark {\n display: block;\n width: 30px;\n height: 30px;\n background-color: #ddd;\n border-radius: 10px;\n position: relative;\n transition: background-color 0.4s;\n overflow: hidden;\n cursor: pointer;\n}\n\n#check:checked ~ .checkmark {\n background-color: #08bb68;\n}\n\n.checkmark::after {\n content: \"\";\n position: absolute;\n width: 5px;\n height: 10px;\n border-right: 3px solid #fff;\n border-bottom: 3px solid #fff;\n top: 44%;\n left: 50%;\n transform: translate(-50%, -50%) rotateZ(40deg) scale(10);\n opacity: 0;\n transition: all 0.4s;\n}\n\n#check:checked ~ .checkmark::after {\n opacity: 1;\n transform: translate(-50%, -50%) rotateZ(40deg) scale(1);\n}"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"86fcb3","snapshot":null,"tags":null,"title":"checkbox by Jack17432","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":176,"cssLen":1136,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n \n","css":"/* \nButton insperation by @ke1221\nMenu icon transofmation insperation by @Ali-Tahmazi99\n*/\n.menuButton {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n gap: 13%;\n color: #090909;\n width: 3.5em;\n height: 3.5em;\n border-radius: 0.5em;\n background: #e8e8e8;\n border: 1px solid #e8e8e8;\n transition: all .3s;\n box-shadow: 6px 6px 12px #c5c5c5,\n -6px -6px 12px #ffffff;\n}\n\n.menuButton:hover {\n border: 1px solid white;\n}\n\n.menuButton:active {\n color: #666;\n box-shadow: inset 4px 4px 12px #c5c5c5,\n inset -4px -4px 12px #ffffff;\n}\n\ninput[type = \"checkbox\"] {\n -webkit-appearance: none;\n display: none;\n visibility: hidden;\n}\n\n.menuButton span {\n width: 30px;\n height: 4px;\n background: #131313;\n border-radius: 100px;\n transition: 0.3s ease;\n}\n\ninput[type]:checked ~ span.top {\n transform: translateY(290%)rotate(45deg);\n width: 40px;\n}\n\ninput[type]:checked ~ span.bot {\n transform: translateY(-270%) rotate(-45deg);\n width: 40px;\n box-shadow: 0 0 10px #495057;\n}\n\ninput[type]:checked ~ span.mid {\n transform: translateX(-20px);\n opacity: 0;\n}"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"32d39f","snapshot":null,"tags":null,"title":"checkbox by joe-watson-sbf","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":114,"cssLen":546,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n","css":".container {\n display: block;\n height: 1.5em;\n width: 1.5em;\n cursor: pointer;\n position: relative;\n}\n\n.container input {\n position: absolute;\n transform: scale(0);\n}\n\n.container input:checked ~ .checkmark {\n transform: rotate(45deg);\n height: 2em;\n width: .7em;\n border-color: #32cd32;\n border-top-color: transparent;\n border-left-color: transparent;\n border-radius: 0;\n}\n\n.container .checkmark {\n display: block;\n width: inherit;\n height: inherit;\n border: 2px solid #32cd32;\n border-radius: 4px;\n transition: all .3s;\n}\n\n\n\n"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"e344ac","snapshot":null,"tags":null,"title":"checkbox by guilhermeyohan","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":340,"cssLen":1305,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".checkbox-wrapper-31:hover .check {\n stroke-dashoffset: 0;\n}\n\n.checkbox-wrapper-31 {\n position: relative;\n display: inline-block;\n width: 40px;\n height: 40px;\n}\n\n.checkbox-wrapper-31 .background {\n fill: #ccc;\n transition: ease all 0.6s;\n -webkit-transition: ease all 0.6s;\n}\n\n.checkbox-wrapper-31 .stroke {\n fill: none;\n stroke: #fff;\n stroke-miterlimit: 10;\n stroke-width: 2px;\n stroke-dashoffset: 100;\n stroke-dasharray: 100;\n transition: ease all 0.6s;\n -webkit-transition: ease all 0.6s;\n}\n\n.checkbox-wrapper-31 .check {\n fill: none;\n stroke: #fff;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 2px;\n stroke-dashoffset: 22;\n stroke-dasharray: 22;\n transition: ease all 0.6s;\n -webkit-transition: ease all 0.6s;\n}\n\n.checkbox-wrapper-31 input[type=checkbox] {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n margin: 0;\n opacity: 0;\n -appearance: none;\n -webkit-appearance: none;\n}\n\n.checkbox-wrapper-31 input[type=checkbox]:hover {\n cursor: pointer;\n}\n\n.checkbox-wrapper-31 input[type=checkbox]:checked + svg .background {\n fill: #6cbe45;\n}\n\n.checkbox-wrapper-31 input[type=checkbox]:checked + svg .stroke {\n stroke-dashoffset: 0;\n}\n\n.checkbox-wrapper-31 input[type=checkbox]:checked + svg .check {\n stroke-dashoffset: 0;\n}\n"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"d67055","snapshot":null,"tags":null,"title":"checkbox by KSAplay","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":479,"cssLen":863,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n \n

\n","css":".container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.container {\n display: block;\n position: relative;\n cursor: pointer;\n font-size: 20px;\n user-select: none;\n transition: 100ms;\n}\n\n.checkmark {\n top: 0;\n left: 0;\n height: 2em;\n width: 2em;\n transition: 100ms;\n animation: dislike_effect 400ms ease;\n}\n\n.container input:checked ~ .checkmark path {\n fill: #FF5353;\n stroke-width: 0;\n}\n\n.container input:checked ~ .checkmark {\n animation: like_effect 400ms ease;\n}\n\n.container:hover {\n transform: scale(1.1);\n}\n\n@keyframes like_effect {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n transform: scale(1.2);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes dislike_effect {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n transform: scale(1.2);\n }\n\n 100% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"97ffc7","snapshot":null,"tags":null,"title":"checkbox by catraco","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1093,"cssLen":928,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n","css":"/*------ Settings ------*/\n.container {\n --color: #a5a5b0;\n --size: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-size: var(--size);\n user-select: none;\n fill: var(--color);\n}\n\n.container .flag-regular {\n position: absolute;\n animation: keyframes-fill .5s;\n}\n\n.container .flag-solid {\n position: absolute;\n display: none;\n animation: keyframes-fill .5s;\n}\n\n/* ------ On check event ------ */\n.container input:checked ~ .flag-regular {\n display: none;\n}\n\n.container input:checked ~ .flag-solid {\n display: block;\n}\n\n/* ------ Hide the default checkbox ------ */\n.container input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n/* ------ Animation ------ */\n@keyframes keyframes-fill {\n 0% {\n transform: rotate(0deg) scale(0);\n opacity: 0;\n }\n\n 50% {\n transform: rotate(-10deg) scale(1.2);\n }\n}"},{"created":"2024-01-22T17:03:58.000Z","isPrivate":0,"projectId":"43461a","snapshot":null,"tags":null,"title":"checkbox by andrew-demchenk0","updated":"2024-01-22T17:03:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1095,"cssLen":859,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n","css":".theme {\n --bg-color: #111;\n --main-color: #fefefe;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 40px;\n height: 40px;\n background-color: var(--bg-color);\n border-radius: 100%;\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n}\n\n.input {\n cursor: pointer;\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 10;\n opacity: 0;\n}\n\n.icon {\n position: absolute;\n top: calc(50% -13px);\n left: calc(50% -13px);\n width: 26px;\n height: 26px;\n}\n\n.icon.icon-moon {\n fill: var(--main-color);\n}\n\n.icon.icon-sun {\n stroke: var(--main-color);\n display: none;\n}\n\n.input:checked ~ .icon.icon-sun {\n display: block;\n}\n\n.input:checked ~ .icon.icon-moon {\n display: none;\n}\n\n.theme:active {\n box-shadow: 0px 0px var(--main-color);\n transform: translate(3px, 3px);\n}"}]}},"actionData":null,"errors":null}