Try this:
<!DOCTYPE html>
<html>
<head>
<title>Loader Modal</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<style>
.modal_bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
opacity:0;
transform: scale(2);
transition: all .2s;
}
.modal_content {
position: fixed;
top: 50%;
transition: all .2s;
left: 50%;
width: 80px;
height: 80px;
background: white;
border-radius: 2px;
padding: 15px;
transform: translate(-50%, -50%)
}
</style>
</head>
<body onload='load()'>
<div class="modal_bg" id="modal">
<div class="modal_content">
<div class="preloader-wrapper active">
<div class="spinner-layer spinner-red-only">
<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>
</div>
</div>
<div class="container"><br>
<img src="https://dynamic-media-cdn.tripadvisor.com/media/photo-o/15/33/f9/c0/big-sur.jpg?w=1100&h=600&s=1" width="100%">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
// The setTimeout is used for demo purposes only. Please remove this, as it will slow your page down!
function load() {
var e = document.getElementById("modal");
e.style.transform = 'scale(1)';
e.style.opacity = '1';
setTimeout(function(){
e.style.transform = 'scale(2)';
e.style.opacity = '0';
setTimeout(function(){
e.style.display = 'none';
}, 0200);
}, 3000);
}
</script>
</body>
</html>
Remove the setTimeout
function (ONLY the one here:
}, 3000);
Hi,
Does anyone know of a way to make the datepicker (https://materializecss.com/pickers.html) inline, so it shows on a page without having to trigger it to open?
Similar to this - https://jqueryui.com/datepicker/#inline
<a class='dropdown-trigger btn' data-target='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider" tabindex="-1"></li>
<li><a href="#!">three</a></li>
<li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
<li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
</ul>
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
<li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
<li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
</ul>
style.display = 'none';
but that doesn't seem to work for materialize buttons
.hide
class doesn't prevent it from taking up space either