[{"id":195,"created_at":"2024-02-16T20:33:10.082899+00:00","html":"

94%

\r\n

\r\n\r\n

\r\n

\r\n\r\n

\r\n

\r\n\r\n

\r\n

\r\n\r\n

\r\n

\r\n\r\n

\r\n

\r\n\r\n

\r\n

\r\n\r\n

\r\n

\r\n\r\n

\r\n

\r\n\r\n

\r\n

\r\n\r\n

\r\n

\r\n\r\n

\r\n

\r\n\r\n

\r\n

\r\n\r\n

\r\n

\r\n\r\n

\r\n

\r\n\r\n

\r\n

\r\n\r\n

\r\n

\r\n\r\n

\r\n

\r\n\r\n\r\n\r\n\r\n\r\n","css":"// Background \r\n$white: #fff;\r\n$orange: #FF7644;\r\n$green: #7FB069;\r\n$blue: #556270;\r\n$tran-speed: 10s;\r\n$bg:black;\r\n\r\n// Particle setting\r\n$particle-count: 10;\r\n$particle-size: 4rem;\r\n$particle-distance: 70vh;\r\n$particle-min-speed: 7000; // ms\r\n$particle-max-speed: 18000; // ms\r\n$particle-max-delay: 7000; // ms\r\n\r\n\r\n\r\nbody {\r\n font-size: 16px;\r\n overflow: hidden;\r\n background: $blue;\r\n background-color: $bg;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n // animation: changeBg $tran-speed infinite alternate;\r\n}\r\n\r\n@keyframes rote {\r\n from {\r\n rotate: 0deg;\r\n }\r\n\r\n to {\r\n rotate: 360deg;\r\n }\r\n}\r\n\r\n@keyframes rotOp {\r\n from {\r\n rotate: 360deg;\r\n }\r\n\r\n to {\r\n rotate: 0deg;\r\n }\r\n}\r\n\r\n\r\n@keyframes changeBg {\r\n 0% {\r\n background: $blue;\r\n }\r\n\r\n 33.33333333% {\r\n background: $green;\r\n }\r\n\r\n 66.66666666% {\r\n background: $orange;\r\n }\r\n}\r\n\r\n\r\n.charging {\r\n width: 100px;\r\n height: 190px;\r\n background-color: transparent;\r\n color: $orange;\r\n font-family: Arial, Helvetica, sans-serif;\r\n font-weight: 900;\r\n\r\n position: absolute;\r\n border-radius: 100px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 50px;\r\n top: 30vh;\r\n}\r\n\r\n.charging::before {\r\n content: \"\";\r\n width: 190px;\r\n height: 190px;\r\n position: absolute;\r\n top: 0;\r\n background-color: $orange;\r\n border-radius: 80px;\r\n z-index: -1;\r\n animation: rote 9s linear infinite;\r\n\r\n}\r\n\r\n.charging::after {\r\n content: \"\";\r\n width: 170px;\r\n height: 180px;\r\n position: absolute;\r\n top: 0;\r\n background-color: $bg;\r\n z-index: -1;\r\n border-radius: 100%;\r\n animation: rotOp 8s linear infinite;\r\n // animation:;\r\n}\r\n\r\n/*** <--- PARTICLES ---> ***/\r\n.bottom-particles {\r\n position: absolute;\r\n bottom: 0;\r\n margin-right: auto;\r\n width: 100px;\r\n z-index: -5;\r\n\r\n\r\n\r\n .bubble {\r\n opacity: 0;\r\n position: absolute;\r\n bottom: -$particle-size;\r\n width: $particle-size;\r\n height: $particle-size;\r\n background-color: $orange;\r\n border-radius: 50%;\r\n\r\n // Randomize bubles\r\n @for $i from 1 through $particle-count {\r\n\r\n // random animation speed\r\n $speed: random($particle-max-speed) + 0ms;\r\n\r\n @if $speed < $particle-min-speed {\r\n $speed: $particle-min-speed + 0ms;\r\n }\r\n\r\n &:nth-child(#{$i}) {\r\n left: random(100) + 0%;\r\n animation: blow $speed infinite;\r\n animation-delay: random($particle-max-delay) + 0ms;\r\n }\r\n }\r\n\r\n }\r\n}\r\n\r\n@keyframes blow {\r\n 0% {\r\n opacity: 0;\r\n transform: translate(0, 0);\r\n }\r\n\r\n 20% {\r\n opacity: 1;\r\n }\r\n\r\n 100% {\r\n opacity: 0;\r\n transform: translate(0, -$particle-distance) scale(.2);\r\n }\r\n}\r\n\r\n\r\n\r\n\r\n\r\n","js":"// ??","user_id":"4529d7ae-0865-47e6-850e-f9cbf1ed7d3c","project_key":"vRpO1I","description":"Charging Animation","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":false,"materialicons":false,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"motionone":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "babelActive": false, "cssProcessor": true, "userImportedJS": [], "typescriptActive": false},"tags":["animation","charging","charging animation","scss","sass"],"hide_js":false,"hide_css":false,"messages":[],"view":[{"views":578}],"profiles":{"username":"abdulmumin"}}]