loaders

In this example below you will see how to do a loaders with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by CarlBoneri, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright CarlBoneri ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>loaders</title>
  <style>
html,
body {
  font-family: "Roboto", sans-serif;
  font-size: 100%;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
  overflow: auto !important;
}

/*Handle the CHROME yellow background for autofill*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: none !important;
  -webkit-text-fill-color: inherit !important;
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: 0 1px 0 0 #26a69a, inset 0 0 0px 9999px white;
}

svg:not(:root),
svg {
  display: block;
  overflow: auto;
}

/* Icons */
.material-icons.md-18 {
  font-size: 18px;
}
.material-icons.md-24 {
  font-size: 24px;
}
.material-icons.md-36 {
  font-size: 36px;
}
.material-icons.md-48 {
  font-size: 48px;
}
/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
  color: rgba(0, 0, 0, 0.54);
}
.material-icons.md-dark.md-inactive {
  color: rgba(0, 0, 0, 0.26);
}
/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
  color: rgba(255, 255, 255, 1);
}
.material-icons.md-light.md-inactive {
  color: rgba(255, 255, 255, 0.3);
}

main,
.content {
  flex: 1 0 auto;
}

/*Helpers*/
.no-pad {
  padding: 0 !important;
}

/*Scroll bars*/

::-webkit-scrollbar {
  width: 3px;
  height: 2px;
}

::-webkit-scrollbar-button {
  width: 3px;
  height: 2px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.54);
  border: 3px none rgba(0, 0, 0, 0.54);
  border-radius: 1px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.64);
}

::-webkit-scrollbar-thumb:active {
  background: rgba(0, 0, 0, 0.54);
}

::-webkit-scrollbar-track {
  background: #fff;
  border: 2px none #fff;
  border-radius: 1px;
}

::-webkit-scrollbar-track:hover {
  background: #fff;
}

::-webkit-scrollbar-track:active {
  background: #fff;
}

::-webkit-scrollbar-corner {
  background: transparent;
}
/* Global Themes*/
.theme-dark {
  background: #424242;
  background-color: #424242;
  color: #ffffff;
  color: rgba(255, 255, 255, 1);
}

.theme-light {
  background: #fafafa;
  background-color: #fafafa;
  color: #000000;
  color: rgba(0, 0, 0, 0.87);
}

/* Positioning Helpers*/
.absolute-center {
  right: 50vw;
  bottom: 50vh;
  transform: translateX(50%) translateY(50%);
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.27);
  padding: 1rem;
}
.center-hv {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.fp-img {
  background: url(image/path) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* Typeit variables */
.type-wrap {
    margin: 10px auto;
    padding: 20px;
    background: initial;
    font-size:2rem;
}
.typed-text{
  display:inline-block;
  color:#000000 !important;
  font-size:2rem;
}

#typed3{
  color:#000000
}
.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 1s infinite;
  -moz-animation: blink 1s infinite;
  animation: blink 1s infinite;
  font-size: 2rem;
  color:cyan;
  margin-left:0;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.why-d {
  color:#242424;
}
.why-p {
  color:#ff4081;
}
.dark-2{
  background-color:#121212 !important;
  background:#121212 !important;
}
</style>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!DOCTYPE html>
<html lang="en">
<!-- BEGIN HEAD -->
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="HandheldFriendly" content="true">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset='UTF-8' />
  <!-- CSS  -->
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.css" type="text/css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.js"></script>
  <script src="http://www.mattboldt.com/typed.js/lib/typed.min.js"></script>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->

<body class="theme-dark">
 
  <div class="row abs_cent">
    <div class="col s6">
    <div class="preloader-wrapper big active">
      <div class="spinner-layer spinner-pink">
        <div class="circle-clipper left">
          <div class="circle"></div>
        </div><div class="gap-patch">
          <div class="circle"></div>
        </div><div class="circle-clipper right">
          <div class="circle"></div>
        </div>
      </div>
  </div>
      <p class="abs_cent">Please Wait</p>
    </div>
    
  </div>
</body>
<!-- END BODY -->

</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/CarlBoneri/loaders-mLmVYx */
/*
  NOTES
  Using wildcards in selectors: [attribut{regex}="string"]
  EXAMPLES:
    + class contains the string "test" ==> [class*="test"]
    + class starts_with the string "test" ==> [class^="test"]
*/
.abs_cent {
     position: absolute;
     left: 50%;
     top: 50%;
     -moz-transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     -o-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);

}
.preloader-wrapper.big {
    width: calc(30vw - 50px) !important;
    height: calc(30vw - 50px) !important;
}
.spinner-pink ,
.spinner-pink-only {
    border-color: #E91E63 !important;
}

html,
body {
  font-family: "Roboto", sans-serif;
  font-size: 100%;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: auto !important;
}

/* GRID */

main,
.content {
  flex: 1 0 auto;
}

/* Spacing-Helpers */
/* pads */
[class*="no-pad"],
.no-pad {
  padding: 0 !important;
}

[class*="no-margin"],
.no-margin {
  margin: 0 !important;
}

[class*="auto-margin"],
.auto-margin {
  margin: 0px auto !important;
}

/* Positioning Helpers*/
.absolute-center {
  right: 50vw;
  bottom: 50vh;
  transform: translateX(50%) translateY(50%);
  position: absolute;
  border: 1px solid #ffffff45;
  border: 1px solid rgba(255, 255, 255, 0.27);
  padding: 1rem;
}

.center-hv {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* Full page body background image */
.fp-img {
  background: url(image/path) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/*
  Handle the CHROME yellow background for autofill
  Also-note that adding autocomplete="off" may be required for firefox30
  EG: <input type="text" name="foo" autocomplete="off" />
*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: none !important;
  -webkit-text-fill-color: inherit !important;
  -webkit-box-shadow: 0 1px 0 0 #26a69a, inset 0 0 0 9999px white;
  box-shadow: 0 1px 0 0 #26a69a, inset 0 0 0 9999px white;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  -o-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

svg:not(:root),
svg {
  display: block;
  overflow: auto;
}

/*Scroll bars*/

::-webkit-scrollbar {
  width: 3px;
  height: 2px;
}

::-webkit-scrollbar-button {
  width: 3px;
  height: 2px;
}

::-webkit-scrollbar-thumb {
  background: #00000091;
  background: rgba(0, 0, 0, 0.54);
  border: 3px none #00000091;
  border: 3px none rgba(0, 0, 0, 0.54);
  border-radius: 1px;
}

::-webkit-scrollbar-thumb:hover {
  background: #000000a3;
  background: rgba(0, 0, 0, 0.64);
}

::-webkit-scrollbar-thumb:active {
  background: #00000091;
  background: rgba(0, 0, 0, 0.54);
}

::-webkit-scrollbar-track {
  background: #ffffff;
  border: 2px none #ffffff;
  border-radius: 1px;
}

::-webkit-scrollbar-track:hover {
  background: #ffffff;
}

::-webkit-scrollbar-track:active {
  background: #ffffff;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Global Themes*/
.theme-dark {
  background: #424242;
  background-color: #424242;
  color: #ffffff;
  color: rgba(255, 255, 255, 1);
}

.theme-light {
  background: #fafafa;
  background-color: #fafafa;
  color: #000000;
  color: rgba(0, 0, 0, 0.87);
}

/* 
 Typeit variables 
 https://mattboldt.com/typed.js/
 <script src="http://www.mattboldt.com/typed.js/lib/typed.min.js"></script>
 
*/

.type-wrap {
  margin: 10px auto;
  padding: 20px;
  background: initial;
  font-size: 2rem;
}

.typed-text {
  display: inline-block;
  color: #000000 !important;
  font-size: 2rem;
}

#typed3 {
  color: #000000;
}

.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 1s infinite;
  -moz-animation: blink 1s infinite;
  animation: blink 1s infinite;
  font-size: 2rem;
  color: cyan;
  margin-left: 0;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/*Downloaded from https://www.codeseek.co/CarlBoneri/loaders-mLmVYx */
$(document).ready(function() {
  $(".rt-select").material_select();
  $(".rt-select").on('change', function(e){
    //console.log($(this).find(":selected").val(););
    $(this).material_select();
  });
});

Comments