[{"id":47,"created_at":"2023-09-15T23:41:02.38015+00:00","html":"\r\n

\r\n

CSS3 Loading animations

\r\n

Loading 1

\r\n

Loading 2

\r\n

Loading 3

\r\n

\r\n \r\n

\r\n

Loading 4

\r\n

Loading 5

\r\n

Loading 6

\r\n

Loading 7

\r\n

Loading 8

\r\n

Loading 9

\r\n

Loading 10

\r\n

\r\n","css":"/* =Default css to make the demo more pretty */\r\n/* -------------------------------------------- */\r\n\r\nbody {\r\n margin: 0 auto;\r\n padding: 20px;\r\n max-width: 1200px;\r\n overflow-y: scroll;\r\n font-family: \"Open Sans\", sans-serif;\r\n font-weight: 400;\r\n color: #777;\r\n background-color: #f7f7f7;\r\n -webkit-font-smoothing: antialiased;\r\n -webkit-text-size-adjust: 100%;\r\n -ms-text-size-adjust: 100%;\r\n}\r\n\r\n.content {\r\n padding: 15px;\r\n overflow: hidden;\r\n background-color: #e7e7e7;\r\n background-color: rgba(0, 0, 0, 0.06);\r\n}\r\n\r\nh1 {\r\n padding-bottom: 15px;\r\n border-bottom: 1px solid #d8d8d8;\r\n font-weight: 600;\r\n}\r\n\r\nh1 span {\r\n font-family: monospace, serif;\r\n}\r\n\r\nh3 {\r\n padding-bottom: 20px;\r\n box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 2px 0 rgba(255, 255, 255, 0.9);\r\n}\r\n\r\np {\r\n margin: 0;\r\n padding: 10px 0;\r\n color: #777;\r\n}\r\n\r\n.clear {\r\n clear: both;\r\n}\r\n\r\n/* -----------------------------------------\r\n=CSS3 Loading animations\r\n-------------------------------------------- */\r\n\r\n/* =Elements style\r\n---------------------- */\r\n.load-wrapp {\r\n float: left;\r\n width: 100px;\r\n height: 100px;\r\n margin: 0 10px 10px 0;\r\n padding: 20px 20px 20px;\r\n border-radius: 5px;\r\n text-align: center;\r\n background-color: #d8d8d8;\r\n}\r\n\r\n.load-wrapp p {\r\n padding: 0 0 20px;\r\n}\r\n\r\n.load-wrapp:last-child {\r\n margin-right: 0;\r\n}\r\n\r\n.line {\r\n display: inline-block;\r\n width: 15px;\r\n height: 15px;\r\n border-radius: 15px;\r\n background-color: #4b9cdb;\r\n}\r\n\r\n.ring-1 {\r\n width: 10px;\r\n height: 10px;\r\n margin: 0 auto;\r\n padding: 10px;\r\n border: 7px dashed #4b9cdb;\r\n border-radius: 100%;\r\n}\r\n\r\n.ring-2 {\r\n position: relative;\r\n width: 45px;\r\n height: 45px;\r\n margin: 0 auto;\r\n border: 4px solid #4b9cdb;\r\n border-radius: 100%;\r\n}\r\n\r\n.ball-holder {\r\n position: absolute;\r\n width: 12px;\r\n height: 45px;\r\n left: 17px;\r\n top: 0px;\r\n}\r\n\r\n.ball {\r\n position: absolute;\r\n top: -11px;\r\n left: 0;\r\n width: 16px;\r\n height: 16px;\r\n border-radius: 100%;\r\n background: #4282b3;\r\n}\r\n\r\n.letter-holder {\r\n padding: 16px;\r\n}\r\n\r\n.letter {\r\n float: left;\r\n font-size: 14px;\r\n color: #777;\r\n}\r\n\r\n.square {\r\n width: 12px;\r\n height: 12px;\r\n border-radius: 4px;\r\n background-color: #4b9cdb;\r\n}\r\n\r\n.spinner {\r\n position: relative;\r\n width: 45px;\r\n height: 45px;\r\n margin: 0 auto;\r\n}\r\n\r\n.bubble-1,\r\n.bubble-2 {\r\n position: absolute;\r\n top: 0;\r\n width: 25px;\r\n height: 25px;\r\n border-radius: 100%;\r\n background-color: #4b9cdb;\r\n}\r\n\r\n.bubble-2 {\r\n top: auto;\r\n bottom: 0;\r\n}\r\n\r\n.bar {\r\n float: left;\r\n width: 15px;\r\n height: 6px;\r\n border-radius: 2px;\r\n background-color: #4b9cdb;\r\n}\r\n\r\n/* =Animate the stuff\r\n------------------------ */\r\n.load-1 .line:nth-last-child(1) {\r\n animation: loadingA 1.5s 1s infinite;\r\n}\r\n\r\n.load-1 .line:nth-last-child(2) {\r\n animation: loadingA 1.5s 0.5s infinite;\r\n}\r\n\r\n.load-1 .line:nth-last-child(3) {\r\n animation: loadingA 1.5s 0s infinite;\r\n}\r\n\r\n.load-2 .line:nth-last-child(1) {\r\n animation: loadingB 1.5s 1s infinite;\r\n}\r\n\r\n.load-2 .line:nth-last-child(2) {\r\n animation: loadingB 1.5s 0.5s infinite;\r\n}\r\n\r\n.load-2 .line:nth-last-child(3) {\r\n animation: loadingB 1.5s 0s infinite;\r\n}\r\n\r\n.load-3 .line:nth-last-child(1) {\r\n animation: loadingC 0.6s 0.1s linear infinite;\r\n}\r\n\r\n.load-3 .line:nth-last-child(2) {\r\n animation: loadingC 0.6s 0.2s linear infinite;\r\n}\r\n\r\n.load-3 .line:nth-last-child(3) {\r\n animation: loadingC 0.6s 0.3s linear infinite;\r\n}\r\n\r\n.load-4 .ring-1 {\r\n animation: loadingD 1.5s 0.3s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;\r\n}\r\n\r\n.load-5 .ball-holder {\r\n animation: loadingE 1.3s linear infinite;\r\n}\r\n\r\n.load-6 .letter {\r\n animation-name: loadingF;\r\n animation-duration: 1.6s;\r\n animation-iteration-count: infinite;\r\n animation-direction: linear;\r\n}\r\n\r\n.l-1 {\r\n animation-delay: 0.48s;\r\n}\r\n\r\n.l-2 {\r\n animation-delay: 0.6s;\r\n}\r\n\r\n.l-3 {\r\n animation-delay: 0.72s;\r\n}\r\n\r\n.l-4 {\r\n animation-delay: 0.84s;\r\n}\r\n\r\n.l-5 {\r\n animation-delay: 0.96s;\r\n}\r\n\r\n.l-6 {\r\n animation-delay: 1.08s;\r\n}\r\n\r\n.l-7 {\r\n animation-delay: 1.2s;\r\n}\r\n\r\n.l-8 {\r\n animation-delay: 1.32s;\r\n}\r\n\r\n.l-9 {\r\n animation-delay: 1.44s;\r\n}\r\n\r\n.l-10 {\r\n animation-delay: 1.56s;\r\n}\r\n\r\n.load-7 .square {\r\n animation: loadingG 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;\r\n}\r\n\r\n.load-8 .line {\r\n animation: loadingH 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;\r\n}\r\n\r\n.load-9 .spinner {\r\n animation: loadingI 2s linear infinite;\r\n}\r\n\r\n.load-9 .bubble-1,\r\n.load-9 .bubble-2 {\r\n animation: bounce 2s ease-in-out infinite;\r\n}\r\n\r\n.load-9 .bubble-2 {\r\n animation-delay: -1s;\r\n}\r\n\r\n.load-10 .bar {\r\n animation: loadingJ 2s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;\r\n}\r\n\r\n@keyframes loadingA {\r\n 0 {\r\n height: 15px;\r\n }\r\n\r\n 50% {\r\n height: 35px;\r\n }\r\n\r\n 100% {\r\n height: 15px;\r\n }\r\n}\r\n\r\n@keyframes loadingB {\r\n 0 {\r\n width: 15px;\r\n }\r\n\r\n 50% {\r\n width: 35px;\r\n }\r\n\r\n 100% {\r\n width: 15px;\r\n }\r\n}\r\n\r\n@keyframes loadingC {\r\n 0 {\r\n transform: translate(0, 0);\r\n }\r\n\r\n 50% {\r\n transform: translate(0, 15px);\r\n }\r\n\r\n 100% {\r\n transform: translate(0, 0);\r\n }\r\n}\r\n\r\n@keyframes loadingD {\r\n 0 {\r\n transform: rotate(0deg);\r\n }\r\n\r\n 50% {\r\n transform: rotate(180deg);\r\n }\r\n\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n@keyframes loadingE {\r\n 0 {\r\n transform: rotate(0deg);\r\n }\r\n\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n@keyframes loadingF {\r\n 0% {\r\n opacity: 0;\r\n }\r\n\r\n 100% {\r\n opacity: 1;\r\n }\r\n}\r\n\r\n@keyframes loadingG {\r\n 0% {\r\n transform: translate(0, 0) rotate(0deg);\r\n }\r\n\r\n 50% {\r\n transform: translate(70px, 0) rotate(360deg);\r\n }\r\n\r\n 100% {\r\n transform: translate(0, 0) rotate(0deg);\r\n }\r\n}\r\n\r\n@keyframes loadingH {\r\n 0% {\r\n width: 15px;\r\n }\r\n\r\n 50% {\r\n width: 35px;\r\n padding: 4px;\r\n }\r\n\r\n 100% {\r\n width: 15px;\r\n }\r\n}\r\n\r\n@keyframes loadingI {\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n@keyframes bounce {\r\n\r\n 0%,\r\n 100% {\r\n transform: scale(0);\r\n }\r\n\r\n 50% {\r\n transform: scale(1);\r\n }\r\n}\r\n\r\n@keyframes loadingJ {\r\n\r\n 0%,\r\n 100% {\r\n transform: translate(0, 0);\r\n }\r\n\r\n 50% {\r\n transform: translate(80px, 0);\r\n background-color: #f5634a;\r\n width: 25px;\r\n }\r\n}","js":"// code here","user_id":"1c3624cd-ae3b-4b60-946f-65ea8f296ff7","project_key":"Vsocc3","description":"Loading animation with 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":[{"views":112}],"profiles":{"username":"devcanvas"}}]