Skip to content
← Back to Community
Blocker
Profile icon
DigiLab

I have made a thing kinda like bootstrap called blocker and ill show you how to use it.

copy and paste these and put into your files if you wanna try it

/* Blocker v1.0 Created With 12/8/20 Tues, 7:01pm */ :root{--bs-red:#ff5733;--bs-orange:#ffbd33;--bs-yellow:#fff000;--bs-green:#0fff00;--bs-blue:#008fff;--bs-purple:#f000ff;-bs-light-red:#ff584f;--bs-light-orange:#ffc856;--bs-light-yellow:#fff66a;--bs-light-green:#55fd4a;--bs-light-blue:#b4dcfc;--bs-light-purple:#f67efe;} .blocker-box{height: 50%;width: 50%;background: #ddd;border:none;}.blocker-header{font-size: 30px;}.blocker-header2{font-size:30px;}.blocker-header3{font-size:24px;}.blocker-header4{font-size:18px;}.blocker-header5{font-size:14px;}.blocker-header6{font-size:12px;}.blocker-btn-default{background:#ddd;border:none;}.blocker-btn-primary{background:#008fff;color:#fff;border:none;}.blocker-btn-success{background:green;color:#fff;border:none;} .blocker-btn-info{background:#008fff;color:#fff;border:none;}.blocker-btn-warning{background:#ffbd33;color:#fff;border:none;}.blocker-btn-link{background:transparent;border:none;color:#008fff;} .a-preloder{border:16px solid #f3f3f3;border-top:16px solid #3498db;border-radius:50%;width:120px;height:120px;animation:spin 2s linear infinite;}@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}} .blocker-box-terminal{height:20%;background:#000;color:#fff;width:30%;font-family:sans-serif;}.blocker-badge{background:#000;border-radius:10px;color:#fff;font-family:sans-serif;font-weight:700;padding:12px;}.blocker-menu{width:35px;height:5px;background:#444;margin:6px 0;}
// Blocker v1.0 Created 12/8/20 9:10pm function nav() { document.getElementById('links').style.display = "block"; }

First Lesson

first, the preloader.

lets say you want a preloader for your site if your using blocker do this

<div class="cs-page-loading active"> <div class="cs-page-loading-inner"> <div class="cs-page-spinner"></div><div class="a-preloader"></div> </div>

after you put in that it should show a preloader atfer that put this in your javascript file

(function () { window.onload = function () { var preloader = document.querySelector('.cs-page-loading'); preloader.classList.remove('active'); setTimeout(function () { preloader.remove(); }, 2000); }; })();

then you have your preloader!

there will be more tutorials tomorow! (i know i spelled it wrong -_-)

Voters
Profile icon
WesleyBartlett
Profile icon
DigiLab
Comments
hotnewtop
Profile icon
Kookiez

think this should be in the tutorials section

Profile icon
DigiLab

@Kookiez oh sorry im new to repl.it ive only been here for a few months

Profile icon
CodingCactus