Skip to content

Instantly share code, notes, and snippets.

@sergixnet

sergixnet/fake-preloader.markdown

Last active April 9, 2019 08:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sergixnet/38560ebb1b07e6dd566d13dbee1f5841 to your computer and use it in GitHub Desktop.
Save sergixnet/38560ebb1b07e6dd566d13dbee1f5841 to your computer and use it in GitHub Desktop.
Download ZIP
Fake preloader
Raw
index.html
<body>
<div class="fake-preloader__container">
<div class="fake-preloader__logo">
<svg viewBox="0 0 1923 1235">
<path d="M1023.106 459.507h-12.638l-35.968 35.44-35.968-35.44h-64.426v47.264l87.394 86.11 61.606-60.701v-72.673zM874.106 448.476h53.23l-53.23-52.448v52.448z"/>
<path d="M994.635 459.507h-40.271l20.136 19.84 20.135-19.84zM874.106 540.213v139.044l70.423-69.389-.135-.133.135-.133-70.423-69.389zM940.837 804.822h67.326L974.5 771.653l-33.663 33.169zM1023.106 565.622l-44.635 43.98.135.133-.135.133 44.635 43.98v-88.226zM850.106 459.507h-23.968l23.968 23.616v-23.616zM805.217 271.396l-7.884 7.768h7.884v-7.768zM805.217 302.812h-9.884l9.884 9.739v-9.739zM850.106 372.38l-33.693-33.198v109.294h33.693V372.38zM850.106 302.812h-33.693v20.77l33.693 33.198v-53.968zM1023.106 447.055l-1.442 1.421h1.442v-1.421zM174.106 653.848v-88.226l-44.771 44.113 44.771 44.113zM1131.753 302.812v21.592l21.914-21.592h-21.914zM1131.753 259.543v19.621h19.914l-19.914-19.621zM1120.557 148.8h-85.365l85.365 84.112V148.8zM1169.5 302.812l-37.747 37.192v85.125l124.141-122.317H1169.5zM1386 208.06l-72.165 71.104h144.33L1386 208.06zM805.217 328.151L779.5 302.812H667.106l138.111 136.082V328.151zM974.5 104.6l-33.663 33.169h67.326L974.5 104.6z"/>
<path d="M1023.106 687.29l-61.606-60.7-87.394 86.11v92.122h50.898l49.496-48.769 48.606 47.892V687.29zM1120.557 302.812h-73.451v104.995l73.451-72.372v-32.623zM1120.557 436.16v-85.125l-73.451 72.373v25.068h60.952l12.499-12.316zM1047.106 508.532l49.756-49.025h-49.756v49.025z"/>
<path d="M874.106 380.427l69.063 68.049h62.662l17.275-17.021V279.164h97.451v-30.652L1019.359 148.8h-89.718L816.413 260.365v18.799h57.693v101.263zM816.413 148.8v95.964l97.395-95.964h-97.395zM874.106 854.972l39.702-39.119h-39.702v39.119zM537 208.06l-72.165 71.104h144.33L537 208.06zM1131.753 945.232h18.914l-18.914-18.636v18.636zM1047.106 804.822h84.647v106.174l34.747 34.236h118.394l-237.788-234.294v93.884zM1386 1011.411l43.165-42.531h-86.33l43.165 42.531z"/>
<path d="M1047.106 827.593l73.451 72.372v-84.112h-73.451v11.74zM1047.106 945.232h73.451v-29.667l-73.451-72.372v102.039zM1723.106 679.257l70.559-69.522-70.559-69.522v139.044z"/>
<path d="M1023.106 819.545l-3.747-3.692h-89.718l-55.535 54.72v98.307h-57.693v21.755l126.756 124.894h62.662l114.726-113.041V968.88h-97.451V819.545z"/>
<path d="M0 0v1235h1923V0zm1723.106 712.7v256.18h-260L1386 1044.853l-77.106-75.973H1170.5l-38.747 38.178v119.502h-121.285L974.5 1162l-35.968-35.44H805.217V995.205L778.5 968.88H614.106L537 1044.853l-77.106-75.973H174.106V687.29l-78.712-77.555 78.712-77.555V279.164h256.788L537 174.618l106.106 104.546H781.5l23.717-23.368V137.769h119.787L974.5 89l49.496 48.769h107.757v106.173l35.747 35.222h112.394L1386 174.618l106.106 104.546h231v227.607l104.5 102.964z"/>
<path d="M1699.106 945.232V736.347l-212 208.885h212zM1289.835 302.812l-158.082 155.759v.936h-.95l-83.697 82.468v135.52l271.729 267.737h134.33l245.941-242.327v-186.34l-216.941-213.753h-192.33zM1699.106 483.123V302.812h-183l183 180.311zM1131.753 991.457l22.914-22.577h-22.914v22.577zM537 1011.411l43.165-42.531h-86.33L537 1011.411zM850.106 516.565L633.165 302.812h-192.33L198.106 541.975v135.52l271.729 267.737h134.33l245.941-242.327v-186.34zM805.217 979.604V968.88h-10.884l10.884 10.724zM805.217 945.232v-6.783l-6.884 6.783h6.884zM198.106 302.812v205.72l208.788-205.72H198.106zM198.106 945.232h237.788L198.106 710.938v234.294zM1120.557 1115.529v-97.44l-98.893 97.44h98.893zM974.5 1146.4l20.135-19.84h-40.271l20.136 19.84zM816.413 1115.529h110.923l-110.923-109.293v109.293zM850.106 736.347l-212 208.885H782.5l22.717-22.383V804.822h44.889v-68.475z"/>
<path d="M850.106 815.853h-33.693v95.965l33.693-33.198v-62.767zM816.413 945.232h33.693V894.22l-33.693 33.198v17.814z"/>
</svg>
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, libero! Placeat excepturi, sit architecto itaque cupiditate quam corporis soluta veniam ex officiis nemo quos distinctio sunt, eum hic, ut optio?</p>
<p>Et totam ea minus, explicabo optio neque assumenda vitae asperiores accusamus ullam soluta, ipsum accusantium maxime quia! Culpa repudiandae blanditiis, pariatur possimus error dolorem odio incidunt optio, voluptate dolor nemo.</p>
<p>Hic molestiae aliquam nulla, necessitatibus vel suscipit delectus qui ratione quidem. Repudiandae necessitatibus vitae, asperiores fugiat ratione optio sint veritatis? Molestiae, sed ab? Doloribus saepe velit incidunt veritatis voluptatibus nostrum.</p>
<p>Pariatur odit doloribus, ea ipsam neque atque magnam iste sapiente ducimus? Eius et aut id quo doloremque necessitatibus neque ex vitae maiores. Quibusdam assumenda placeat nam ipsa, cupiditate at eius!</p>
<p>Maxime fugiat ex dolorum deleniti debitis facilis at laborum qui vel accusamus doloribus commodi, earum numquam voluptates beatae provident fugit ipsum adipisci nobis cumque amet. Quidem sit odio aperiam in?</p>
<p>Eum eligendi sint saepe consequatur eos sequi, distinctio, pariatur nostrum perspiciatis facilis ex doloribus debitis neque ducimus illum non? Ea, eaque natus quae harum excepturi explicabo sunt dignissimos ipsa deserunt.</p>
<p>Quibusdam reiciendis repellendus nemo nostrum odit quos, placeat labore temporibus recusandae illo quod vel qui fugiat atque nisi pariatur beatae minima velit, facere nobis vero dolor cum! Id, dolor quasi.</p>
<p>Necessitatibus, commodi, delectus illo saepe nisi voluptatum numquam, natus voluptas aut eligendi vitae unde amet laborum. Porro amet tempore dolor veniam, pariatur numquam eum sint distinctio dolore ipsum nostrum eligendi.</p>
<p>Rem eos quis ipsum, provident cum facere odio doloremque ipsam, eveniet illo quaerat temporibus a ipsa adipisci laborum necessitatibus error, animi doloribus magnam veniam repellat? Eligendi sunt tempore ut! Sint!</p>
<p>Nesciunt distinctio ducimus mollitia ea officiis laborum autem quidem omnis, commodi rem quis atque necessitatibus suscipit eveniet veniam fuga tempora sunt error nulla exercitationem nobis debitis beatae ex. Labore, beatae.</p>
<p>Ea, officia cum! Sit architecto labore quisquam minus itaque! Corporis magni molestiae quo tenetur explicabo magnam veniam quis sequi expedita? Obcaecati mollitia labore voluptatem assumenda. Odio, doloremque veniam. Praesentium, est.</p>
<p>Autem quibusdam doloremque totam qui provident quasi iure quam expedita dolores placeat fugiat voluptate, odit accusamus beatae inventore eos corporis porro corrupti. Atque sequi tempore, modi saepe sit voluptatibus ad?</p>
<p>Ut exercitationem voluptatum, quos error quod delectus at accusantium similique rem nam unde veritatis quia totam, sed aperiam? Neque libero accusamus alias mollitia ut commodi doloremque maiores quisquam dolor error.</p>
<p>Harum a illo natus cupiditate officia aut vitae quam obcaecati numquam tenetur perferendis labore, consectetur maiores nulla eveniet adipisci. Vel illo neque nisi assumenda ipsa repellendus eius, praesentium autem omnis!</p>
<p>Qui fuga voluptates possimus at perspiciatis odit consectetur. Eaque autem recusandae facere in temporibus cumque neque repellat voluptatibus, incidunt itaque, perspiciatis sapiente vel fugiat distinctio. Unde consequatur eligendi placeat animi.</p>
<p>Impedit atque veritatis consectetur exercitationem delectus consequatur eaque? Quaerat libero voluptates incidunt asperiores distinctio molestias commodi impedit nisi perferendis soluta aliquid suscipit ipsum, minus obcaecati iusto ullam esse veniam tenetur!</p>
<p>Magnam, iusto! Accusantium dolores odio, autem non totam, aliquid laudantium assumenda rem dolorum nostrum nulla dignissimos facere, at hic iusto amet voluptatem aliquam placeat porro eaque laborum atque. Quidem, dolor!</p>
<p>Asperiores voluptatibus tempore magni rem molestias quisquam ex, obcaecati, ut ea, nostrum maiores reprehenderit quidem id esse perferendis accusantium deserunt. Ut animi et similique dolores reprehenderit ullam quaerat labore nesciunt?</p>
<p>Cum voluptas, velit repudiandae non atque culpa fuga possimus dolore expedita quae quia saepe, voluptatem ducimus modi consequatur adipisci nemo veritatis enim aspernatur nostrum ut rem odit. Est, pariatur fuga?</p>
<p>Pariatur ipsam, cumque quo quam corporis minus repellendus perferendis quaerat adipisci est aliquid assumenda similique vero esse asperiores, rerum explicabo fugiat nulla! Accusamus voluptatibus enim, maiores ullam maxime animi tempore.</p>
<p>Eum corrupti perferendis mollitia exercitationem veniam, ipsam ex aut id, ipsum aperiam esse hic cupiditate recusandae pariatur dignissimos, quaerat earum sunt consequatur natus corporis accusamus porro ullam est sed. Nulla.</p>
<p>Nam illum dolorem molestiae inventore, labore exercitationem. Magnam nulla, deserunt quisquam eveniet ex autem obcaecati alias, id praesentium voluptatem cupiditate beatae neque libero amet maiores odio recusandae voluptatibus explicabo. Quod.</p>
<p>Consequuntur saepe a amet vero nihil dolorum molestiae, recusandae magnam tenetur eligendi voluptates, corporis unde cumque suscipit, odit culpa. Culpa libero expedita aut debitis? Nostrum autem illo aperiam a repudiandae.</p>
<p>Eveniet beatae aliquid quaerat autem incidunt excepturi molestias! Eum assumenda sequi mollitia, animi odit quod pariatur eveniet dolores rem vitae commodi aliquam tenetur magnam architecto aperiam obcaecati magni eius doloremque!</p>
<p>Dolor officia, nulla saepe illo praesentium numquam molestias tempore, quo debitis sequi quaerat itaque facere ratione accusantium nemo nobis eaque explicabo veritatis cumque eos provident incidunt quibusdam. Dolor, perferendis minus!</p>
<p>Aliquam quibusdam possimus laudantium nam id expedita cumque nisi illo magnam eligendi sed fugit eaque deserunt hic dolor distinctio esse quia eum quod, velit odio minima voluptatum corporis? Dicta, quod.</p>
<p>Debitis eligendi laudantium vel molestias earum. Aperiam hic maxime esse similique cupiditate tempore nihil quisquam tenetur quas totam, voluptates libero voluptatibus consequuntur. Exercitationem deleniti illo asperiores quasi dolore quo dignissimos!</p>
<p>Modi nostrum ducimus quaerat excepturi tempore, ipsum accusamus quidem aut numquam animi ex culpa magnam soluta dignissimos quam. Placeat, earum praesentium repellendus nisi odio laudantium voluptatum adipisci a porro sed.</p>
<p>Sint ullam qui nihil impedit? Veritatis facilis earum excepturi fugiat! Corporis odio illo animi, ad, tempore deserunt eum soluta nulla inventore mollitia praesentium sequi sed at fuga quaerat molestias itaque!</p>
<p>Hic enim, consequatur sed minus nisi soluta magnam pariatur maxime, repellat corporis, ipsam repellendus similique eaque. Animi reiciendis vitae quibusdam, dicta sequi quae maiores, nihil eius odit vero alias porro.</p>
<p>Exercitationem recusandae dolor officia suscipit facere libero praesentium quidem, perferendis dolorum blanditiis itaque officiis ex ullam minus laborum. Sequi impedit repellat quisquam assumenda iste quo delectus similique possimus libero corrupti?</p>
<p>Necessitatibus assumenda corporis dolor sit ipsam nihil velit quibusdam, praesentium quidem dignissimos nobis eaque vero, debitis magnam ab odio quis molestiae accusamus temporibus eligendi aut cupiditate harum. Fuga, totam molestiae.</p>
<p>Dolorem eum sed odit reiciendis modi placeat laborum labore, autem numquam eligendi iure dolore id. Dolore obcaecati pariatur, numquam iure ut perferendis incidunt mollitia vel, earum porro voluptatum dolor laudantium.</p>
<p>Molestiae exercitationem animi veniam. Delectus corporis, maxime veniam neque aspernatur officiis sint eum fuga soluta magnam blanditiis alias minus illum? Nihil eum ad voluptatibus, facere aperiam repudiandae atque perspiciatis voluptas!</p>
<p>Dicta quis tempora exercitationem in voluptatum assumenda veritatis cum nam repellat eveniet. Impedit nihil cupiditate dicta magni recusandae in assumenda facilis, ipsam eveniet, quasi, alias hic commodi perspiciatis iusto exercitationem?</p>
<p>Modi animi facilis, corrupti possimus maxime in praesentium ducimus voluptatibus sequi placeat ullam odit neque nesciunt iusto vel eligendi expedita reiciendis, nemo quos magni sed? Aut iure cum dignissimos nostrum.</p>
<p>Nesciunt magni iure, voluptatum amet impedit nostrum ullam accusantium nemo esse doloribus soluta non, eius, placeat tenetur reiciendis delectus nisi fugit consequuntur corrupti excepturi maiores. Esse corporis provident nobis modi!</p>
<p>Iste, reiciendis alias. Doloribus magni odio quibusdam sapiente autem dolorum sunt. Hic debitis obcaecati delectus cum a. Veritatis omnis fugit repudiandae exercitationem! Eius quidem ut consequuntur animi fuga iusto error?</p>
<p>Magni aperiam illo quaerat commodi possimus! Officia error numquam repellat perspiciatis quam praesentium quo illum eius magni voluptatibus, sapiente fugiat porro quas perferendis laboriosam nam pariatur cupiditate tempora dolore ullam?</p>
<p>Sapiente, expedita ab ullam accusantium saepe corporis voluptatem nulla beatae, laborum quasi, ratione nihil distinctio in ex iusto reprehenderit voluptatum! Incidunt, sit inventore numquam a possimus maiores dolorum in debitis!</p>
<p>Quo quibusdam deserunt iure saepe quos. Perferendis, magnam quae totam praesentium voluptate nemo, quo minus sapiente aspernatur ducimus corrupti ea soluta, doloremque ullam itaque mollitia error officia aut temporibus ipsam!</p>
<p>Odit, nesciunt optio. Veniam minus blanditiis vero modi incidunt in quibusdam dolor a, totam illum, quasi excepturi obcaecati ratione nemo recusandae, sequi mollitia iure non culpa. At eligendi numquam veniam.</p>
<p>Architecto ipsam sint expedita. Aliquid consequuntur blanditiis quos consequatur soluta quia asperiores perferendis non vel? Est quis recusandae praesentium quia, voluptas modi dolorum neque, optio commodi esse sed ipsum tempore!</p>
<p>Optio id totam dolorum quos. Sequi natus maiores ipsa dolorem fuga. Facere repellat esse ab quibusdam tempore, eligendi odio aliquam minima pariatur doloribus quisquam est, alias voluptate ipsam placeat tenetur.</p>
<p>Facilis enim doloribus voluptatum, voluptates quos earum, vero odio deleniti asperiores ipsa veritatis suscipit nobis. Earum sit impedit odio culpa esse mollitia dolores neque! Omnis iusto neque expedita dolorem unde.</p>
<p>Laborum labore id recusandae modi cupiditate iste optio natus. Voluptatem natus ipsam incidunt laudantium hic. Doloribus ratione, vel, corrupti nemo at voluptatum quod tempora delectus totam quisquam amet vero repellendus?</p>
<p>Velit atque amet quibusdam. Perspiciatis ad placeat culpa porro! Esse, exercitationem cumque saepe in fuga repudiandae maiores ex nesciunt fugit. Dolorem placeat aliquid porro numquam esse aut sint alias labore.</p>
<p>Esse nemo dignissimos quas ea. Excepturi, quis dolorum. Repellat quaerat asperiores molestiae ea? Quam beatae minima eum, consequuntur dolor porro repellat enim adipisci eos quasi! Eaque eligendi eum provident temporibus.</p>
<p>Unde quod aut fugit exercitationem, pariatur repellendus voluptatum quaerat. At, ex placeat. Similique architecto explicabo dolore ipsam dicta repudiandae numquam fugit, aut voluptates dolorum temporibus quam, quaerat laudantium iste nulla?</p>
<p>Impedit eum excepturi veniam numquam voluptatibus officiis fugiat? Harum, officia velit totam quae qui aliquam dolor id? Ipsa quo numquam commodi eum. Mollitia dolores labore nobis omnis est sequi totam.</p>
<p>Temporibus quidem architecto facere vel ipsum atque consequatur, quos magni iure mollitia veritatis saepe ad culpa dolorem delectus? Quos, architecto amet voluptatem distinctio consequuntur perspiciatis nobis beatae eaque provident libero?</p>
<p>Fugiat, corporis a saepe dolorum ratione minima libero distinctio doloribus aliquam, animi optio, quisquam aspernatur eius ipsam sit assumenda maiores vero labore non? Eos pariatur velit quibusdam laudantium repellat tempore.</p>
<p>Impedit voluptates illo rerum cumque molestias placeat error accusamus, quas minima beatae praesentium exercitationem velit delectus suscipit, quibusdam in nihil quia. Aliquid minus autem accusantium aliquam ipsam neque error repellendus.</p>
<p>Eius voluptatem eligendi sunt exercitationem nihil magnam, neque asperiores, dolorem explicabo ducimus debitis beatae eos, voluptatum ullam aperiam. Velit rerum deleniti minima dolore perspiciatis magni consequatur recusandae ipsum suscipit voluptate.</p>
<p>Nobis inventore veritatis officia sapiente nisi explicabo veniam praesentium? Pariatur vitae tempora numquam sequi doloribus ipsum? Alias, expedita. Quas nesciunt libero tempore natus dicta rerum modi perspiciatis blanditiis sed sunt?</p>
<p>Commodi amet a maxime, possimus culpa esse recusandae reiciendis enim, nobis voluptatem asperiores consequuntur aliquam, aperiam rem laudantium autem? Debitis repellat eos inventore necessitatibus, voluptatum vel laboriosam ducimus velit quas?</p>
<p>Odio ex omnis molestiae ipsa veniam! Numquam architecto iusto voluptate optio id iste, facere dolorem temporibus doloribus earum autem tempora mollitia inventore ex quibusdam vel sed perferendis necessitatibus consectetur eligendi.</p>
<p>Possimus, provident sit! Sapiente fuga ut minima, rem saepe iure voluptas mollitia sint ullam, impedit officia eos fugiat? Itaque impedit vitae nesciunt ab libero vel, aut repellendus neque adipisci cumque.</p>
<p>Possimus iure dolore quibusdam animi impedit, itaque modi temporibus totam, eius architecto, quas libero iusto quasi tempore rerum voluptate. Eius alias reprehenderit iste harum et eveniet id cupiditate dignissimos soluta.</p>
<p>Commodi ipsam doloremque at id, debitis nihil beatae a velit accusantium quas officia architecto suscipit voluptatem quibusdam quasi? Culpa rerum sapiente repellendus voluptatibus nisi itaque voluptates, nostrum eligendi omnis quod.</p>
<p>Nisi aliquid ducimus ea eum, recusandae aut molestiae accusantium libero nobis quos? Sed minus quos atque laudantium mollitia, maxime magnam obcaecati nobis recusandae, omnis rem vitae dolores quis unde aliquid!</p>
<p>Eaque deserunt alias maxime, hic assumenda, ex voluptates ad quidem eveniet consequuntur, quia unde! Nesciunt temporibus ratione ipsam ea cum molestiae fuga molestias similique, nihil id in explicabo officiis amet!</p>
<p>Eius doloribus atque officiis perspiciatis facilis, iusto nisi nesciunt aut, modi quasi, dolor consequuntur saepe. Optio, quos soluta culpa dolores eos, voluptatum aspernatur, aliquid eaque necessitatibus numquam autem accusamus dignissimos?</p>
<p>Dolorem omnis saepe earum? Distinctio, quasi fuga facere rerum placeat nam nisi necessitatibus nemo at soluta illum delectus maiores voluptatem mollitia vitae nobis consequuntur? Quam laboriosam necessitatibus quia iste sint?</p>
<p>Placeat nesciunt fugit deserunt fugiat quasi minima aperiam iure esse iusto omnis asperiores odit error amet sit tempora, tenetur explicabo nemo aspernatur quam officiis obcaecati ad. Voluptatibus error sunt recusandae.</p>
<p>Cumque quos distinctio accusamus sequi suscipit blanditiis quas animi dolores. Eveniet, cumque, laboriosam laudantium aspernatur corrupti est nemo sunt deleniti harum ab, libero aliquid esse officia ea repudiandae ipsum voluptates!</p>
<p>Earum a quisquam sed minima aperiam veniam hic neque eum laudantium vero architecto quibusdam id officiis soluta odit optio doloremque, molestias fugit mollitia illum sapiente atque voluptate saepe. Ab, porro!</p>
<p>Id, optio mollitia! Hic saepe officia autem omnis officiis unde fugiat nemo maxime ea, commodi molestiae, earum sequi libero sunt obcaecati dolore recusandae neque voluptatum! Perferendis dolorem similique voluptas autem.</p>
<p>Quae libero itaque facilis eligendi harum, quam, distinctio voluptatem placeat ipsam vel odit porro quidem perspiciatis sed quas eos explicabo delectus atque quisquam dolorum repellat impedit similique. Laboriosam, omnis rem.</p>
<p>Neque autem mollitia necessitatibus ut laudantium corporis sed doloribus aliquid, rerum quo nemo tempora non, doloremque repellendus obcaecati? Ipsa autem ut porro, sequi illum culpa magni maiores id eius officia.</p>
<p>Rerum quaerat dignissimos ducimus fugiat obcaecati ipsum quos, officia vitae iusto placeat sit, perspiciatis numquam quia ex enim quo! Nostrum, laborum blanditiis. Exercitationem at laudantium eos assumenda dolore libero vitae!</p>
<p>Labore tenetur distinctio consectetur sed ut, quibusdam placeat aliquid itaque mollitia minima? Ipsa, at cumque consectetur laudantium, eius iure dolores recusandae inventore quibusdam omnis aliquam voluptate incidunt repellendus! Omnis, modi.</p>
<p>Non nemo numquam iste error sapiente atque, illum obcaecati nesciunt reprehenderit beatae, ad fuga molestiae ipsa? Cupiditate tempora quas aperiam cum optio dolore quidem iure dolorum? Quia expedita modi fugit!</p>
<p>Adipisci tempora ipsam autem tempore ipsum rerum cupiditate aliquid recusandae qui, debitis molestias fugit quaerat magni expedita, velit corrupti quibusdam neque ullam voluptate a ut molestiae, magnam laboriosam! Explicabo, illo!</p>
<p>Voluptates facilis provident nemo! Quod mollitia nostrum necessitatibus? Quae magnam excepturi consectetur sapiente accusamus nulla aliquid, odio libero aspernatur saepe. Nesciunt dignissimos a officia! Consequatur asperiores consectetur neque praesentium modi.</p>
<p>Ex soluta expedita consequuntur quaerat similique cumque? Temporibus pariatur doloribus ut dicta veniam quisquam quaerat tenetur ipsum dolorem quasi explicabo eaque delectus error laborum quibusdam adipisci, corrupti officia quam accusamus!</p>
<p>Autem exercitationem deserunt quas pariatur, atque minus numquam facere excepturi. Similique libero adipisci, enim, ullam a velit maxime eos molestias, blanditiis aliquam veritatis? Dignissimos, mollitia nulla. Dolorem magnam accusantium nemo.</p>
<p>Voluptate voluptatibus explicabo sed illo quia veniam inventore tempore recusandae suscipit saepe repudiandae dolor, eius, libero cum modi accusamus earum! Ipsam veritatis quis ad necessitatibus! Maiores, hic. Dolores, natus cupiditate.</p>
<p>Numquam dolor commodi itaque, reprehenderit, dolore qui, sed quod laudantium enim architecto quia. Molestiae molestias porro magni? Excepturi voluptatem mollitia repudiandae nisi voluptatibus, blanditiis ipsa asperiores esse eligendi est. Sequi.</p>
<p>Ex obcaecati deleniti quas dolore quo labore dolores aliquid iure error. Ducimus cupiditate aperiam consequatur omnis blanditiis ipsum atque, obcaecati tempore vero repellat dolore. At fugiat voluptas dignissimos vero iure.</p>
<p>Beatae, laborum impedit! Molestiae ducimus magni dolorum labore at? Atque explicabo quae esse ipsam nam, labore doloribus minima quia blanditiis? Ratione dolore magnam nobis iure molestiae! Illo explicabo minima ipsam?</p>
<p>Distinctio consectetur maxime rerum sunt at sit modi. Accusantium culpa nulla laborum, laudantium delectus ipsa accusamus, reprehenderit deleniti distinctio at corrupti vitae necessitatibus ullam molestiae ducimus, ad nostrum impedit voluptate.</p>
<p>Ad unde adipisci veritatis nam asperiores maiores culpa architecto, mollitia sequi numquam eius iusto ducimus laborum esse cum doloremque quod illum voluptates corporis incidunt earum accusantium voluptatem explicabo. Deleniti, neque.</p>
<p>Error itaque aliquid quia inventore cupiditate a distinctio non necessitatibus ipsam similique repellendus sapiente quisquam sunt dicta commodi nemo expedita ea iure, hic mollitia voluptatem perspiciatis? Optio fugit recusandae deserunt.</p>
<p>Vel ut est possimus modi. Aliquam eum quos dolorem culpa accusantium maiores alias architecto minus natus eius id vitae necessitatibus doloribus voluptate facere, distinctio deleniti corrupti soluta harum nulla eligendi.</p>
<p>Rerum porro eaque alias enim quis voluptates cum aut odio in, quam ducimus libero et corrupti odit architecto, doloremque earum est a illum! Consectetur corporis neque saepe deserunt? Omnis, iste.</p>
<p>Doloremque nulla ipsum doloribus facere vel aut. Consequatur amet nisi quo optio velit dicta facilis consequuntur reiciendis nulla doloremque neque recusandae eveniet inventore tempore quis, atque aliquid rerum numquam magni.</p>
<p>Quidem, mollitia minima. Consequatur deleniti, vel itaque distinctio ex corrupti recusandae odio quis error neque laboriosam beatae velit dolore asperiores mollitia eligendi laborum veritatis eos dolorem ipsam eveniet aliquam. Quos?</p>
<p>Consequuntur, animi aliquam itaque eveniet rem ipsum fugiat amet voluptatibus. Optio quas fugit sint eos ab cupiditate qui. Tenetur neque omnis exercitationem a necessitatibus aut nostrum libero possimus. Earum, tenetur?</p>
<p>Voluptates nemo id quisquam reprehenderit ipsa optio dolor labore excepturi. Ducimus vel veniam repellat dignissimos, animi corrupti perferendis repudiandae adipisci inventore, consequuntur excepturi necessitatibus tempore? Dolores, eveniet reprehenderit. Esse, ut.</p>
<p>A dolore, nemo aliquam, ea similique molestiae magnam vero, dicta culpa labore molestias accusantium ipsam repellat unde aperiam explicabo blanditiis hic nisi laborum consectetur pariatur iste non dignissimos optio! Corrupti?</p>
<p>Deserunt voluptatibus nihil ullam culpa repudiandae eos odio adipisci. Fugiat, dicta cupiditate quaerat ipsum accusamus esse mollitia sequi? Repellendus, voluptas vel distinctio quia ex ad iure reprehenderit quisquam quasi et.</p>
<p>At sed, magnam maiores cumque fugiat ea esse rem minima voluptates, deleniti, eveniet dolorem blanditiis non quibusdam hic possimus molestiae perferendis itaque quae mollitia. Voluptate unde corrupti doloribus iure voluptas.</p>
<p>Veritatis, laudantium aliquid? Commodi quae molestiae exercitationem tenetur labore, quas velit placeat, maiores, dolores harum minus quam iste incidunt? Alias labore cumque eveniet illo ratione dignissimos numquam dolor deserunt est!</p>
<p>Consequuntur alias nemo, qui dicta veritatis cum, quod incidunt beatae odio in autem deleniti ratione velit tempore. Cumque quos illum blanditiis aliquid! Excepturi incidunt ipsum, nesciunt deserunt eligendi odit tempore?</p>
<p>Cupiditate, ad. Ad fugiat dolore, molestiae quidem veritatis eum eaque consectetur, qui labore adipisci minima perferendis fugit expedita corrupti quae soluta placeat accusamus! Voluptas consequatur exercitationem, eligendi porro soluta amet.</p>
<p>Assumenda repellendus eveniet sapiente et fugit reiciendis incidunt harum adipisci, magnam ut similique, beatae recusandae quod quos nostrum esse itaque, labore dolor sunt ratione totam aut autem sed sint! Tenetur.</p>
<p>Quam eveniet velit unde mollitia optio illum laudantium recusandae aliquam fugit culpa, aut quia in inventore maiores esse impedit, tenetur dolorem vero, repellendus iusto. Rerum aspernatur aliquid ipsa debitis! Fuga!</p>
<p>Eligendi modi eius ex et nisi ullam explicabo dicta esse saepe. Voluptatibus laboriosam accusantium nihil vero est quasi tenetur nostrum ullam autem, debitis cum porro doloribus numquam accusamus, molestiae dignissimos!</p>
<p>Molestias a voluptatibus alias libero possimus dolorem facere odit omnis molestiae placeat vitae repudiandae maiores doloribus obcaecati adipisci cum, praesentium porro consequuntur! Vitae repellat excepturi molestiae molestias odit veniam quisquam?</p>
</body>
Raw
script.js
(function () {
'use strict';
// change the code
}(jQuery));
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Raw
style.scss
.fake-preloader__container {
--main-bg-color: #fabada;
--logo-color: red;
--fill-logo-color: blue;
--fill-time: 1.5s;
background-color: var(--main-bg-color);
width: 100%;
height: 100vh;
z-index: 999999;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
* {
&,
&:before,
&:after {
box-sizing: border-box;
}
}
}
.fake-preloader__logo {
position: relative;
background-size: 150% 200%;
background-position: 0% 0%;
background-image: linear-gradient(to bottom, var(--logo-color) 0%, var(--logo-color) 50%, var(--fill-logo-color) 50%, var(--fill-logo-color) 100%);
width: 80%;
max-width: 900px;
animation: fillLogo var(--fill-time) ease-in-out forwards;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 10px solid var(--main-bg-color);
}
svg {
width: 100%;
height: 100%;
display: block;
fill: var(--main-bg-color);
}
}
@keyframes fillLogo{
to {
background-position: 0% 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment