[{"id":42,"created_at":"2023-09-14T19:06:24.381457+00:00","html":"\r\n\r\n

\r\n \r\n

\r\n

Spinner created with only HTML and CSS

\r\n \r\n

\r\n\r\n

\r\n \r\n

Spinner created with custom SVG and CSS Animation

\r\n

\r\n","css":" #html-spinner {\r\n width: 40px;\r\n height: 40px;\r\n border: 4px solid #ac8c3e;\r\n border-top: 4px solid white;\r\n border-radius: 50%;\r\n }\r\n\r\n #html-spinner,\r\n #svg-spinner {\r\n -webkit-transition-property: -webkit-transform;\r\n -webkit-transition-duration: 1.2s;\r\n -webkit-animation-name: rotate;\r\n -webkit-animation-iteration-count: infinite;\r\n -webkit-animation-timing-function: linear;\r\n -moz-transition-property: -moz-transform;\r\n -moz-animation-name: rotate;\r\n -moz-animation-duration: 1.2s;\r\n -moz-animation-iteration-count: infinite;\r\n -moz-animation-timing-function: linear;\r\n transition-property: transform;\r\n animation-name: rotate;\r\n animation-duration: 1.2s;\r\n animation-iteration-count: infinite;\r\n animation-timing-function: linear;\r\n }\r\n\r\n @-webkit-keyframes rotate {\r\n from {\r\n -webkit-transform: rotate(0deg);\r\n }\r\n\r\n to {\r\n -webkit-transform: rotate(360deg);\r\n }\r\n }\r\n\r\n @-moz-keyframes rotate {\r\n from {\r\n -moz-transform: rotate(0deg);\r\n }\r\n\r\n to {\r\n -moz-transform: rotate(360deg);\r\n }\r\n }\r\n\r\n @keyframes rotate {\r\n from {\r\n transform: rotate(0deg);\r\n }\r\n\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n\r\n /* Rest of page style*/\r\n body {\r\n background: #ffd260;\r\n font-family: 'Open Sans', sans-serif;\r\n -webkit-font-smoothing: antialiased;\r\n color: #393D3D;\r\n }\r\n\r\n #container {\r\n width: 90%;\r\n max-width: 700px;\r\n margin: 1em auto;\r\n position: relative;\r\n }\r\n\r\n /* spinner positioning */\r\n #html-spinner,\r\n #svg-spinner {\r\n position: absolute;\r\n top: 80px;\r\n margin-left: -24px;\r\n }\r\n\r\n #html-spinner {\r\n left: 25%;\r\n }\r\n\r\n #svg-spinner {\r\n left: 75%;\r\n }\r\n\r\n #html-para,\r\n #svg-para {\r\n position: absolute;\r\n top: 100px;\r\n width: 40%;\r\n padding: 5%;\r\n text-align: center;\r\n }\r\n\r\n #svg-para {\r\n left: 50%;\r\n }","js":"","user_id":"1c3624cd-ae3b-4b60-946f-65ea8f296ff7","project_key":"60YKpn","description":"Spinner with JUST HTML and CSS","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":false,"materialicons":true,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"framermotion":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "cssProcessor": false},"tags":[],"hide_js":false,"hide_css":false,"messages":[],"view":[],"profiles":{"username":"devcanvas"}}]