simongehrig.de/loadscreen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Initial Commit

Browse Source
This commit is contained in:
Simon Gehrig
2017-03-07 10:55:53 +01:00
commit 498492d79e
7 changed files with 140 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.idea/scopes/css_tmp.xml
Generated
+3
View File
@@ -0,0 +1,3 @@
<component name="DependencyValidationManager">
<scope name="css.tmp" pattern="file[loadscreen]:*.css.tmp" />
</component>
.idea/vcs.xml
Generated
+7
View File
@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
<mapping directory="C:\Users\Simon\Documents\Websites\00 Plugins\loadscreen\scss\scss-grid" vcs="Git" />
</component>
</project>
.idea/watcherTasks.xml
Generated
+43
View File
@@ -0,0 +1,43 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectTasksOptions">
<TaskOptions isEnabled="true">
<option name="arguments" value="--no-cache --update $FileName$:$FileNameWithoutExtension$.css.tmp" />
<option name="checkSyntaxErrors" value="false" />
<option name="description" value="Compiles .scss files into .css files" />
<option name="exitCodeBehavior" value="ERROR" />
<option name="fileExtension" value="scss" />
<option name="immediateSync" value="true" />
<option name="name" value="SCSS" />
<option name="output" value="$FileNameWithoutExtension$.css.tmp" />
<option name="outputFilters">
<array />
</option>
<option name="outputFromStdout" value="false" />
<option name="program" value="C:/Ruby23-x64/bin/scss.bat" />
<option name="scopeName" value="Project Files" />
<option name="trackOnlyRoot" value="true" />
<option name="workingDir" value="$FileDir$" />
<envs />
</TaskOptions>
<TaskOptions isEnabled="true">
<option name="arguments" value="$FileName$ --use autoprefixer -o $FileNameWithoutExtension$" />
<option name="checkSyntaxErrors" value="false" />
<option name="description" value="" />
<option name="exitCodeBehavior" value="ERROR" />
<option name="fileExtension" value="*" />
<option name="immediateSync" value="true" />
<option name="name" value="Autoprefixer" />
<option name="output" value="$FileNameWithoutExtension$" />
<option name="outputFilters">
<array />
</option>
<option name="outputFromStdout" value="false" />
<option name="program" value="$USER_HOME$/AppData/Roaming/npm/postcss.cmd" />
<option name="scopeName" value="css.tmp" />
<option name="trackOnlyRoot" value="false" />
<option name="workingDir" value="$FileDir$" />
<envs />
</TaskOptions>
</component>
</project>
example/load.html
+31
View File
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Load</title>
<link href="loadscreen.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="../js/loadscreen.js"></script>
</head>
<body>
<img src="https://unsplash.it/500/500/?random">
<img src="https://unsplash.it/501/501/?random">
<img src="https://unsplash.it/502/502/?random">
<img src="https://unsplash.it/503/503/?random">
<img src="https://unsplash.it/504/504/?random">
<img src="https://unsplash.it/505/505/?random">
<img src="https://unsplash.it/506/506/?random">
<img src="https://unsplash.it/507/507/?random">
<img src="https://unsplash.it/508/508/?random">
<!--<img src="https://unsplash.it/509/509">-->
<div id="loadscreen">
<div class="loadtable">
<div class="loadtext">loading...</div>
</div>
</div>
</body>
</html>
example/loadscreen.scss
+11
View File
@@ -0,0 +1,11 @@
@import "../scss/loadscreen";
#loadscreen{
//@include
//background-color: white;
}
img {
@include cols(3,0);
margin-bottom: -4px;
}
js/loadscreen.js
+9
View File
@@ -0,0 +1,9 @@
/**
* Created by Simon on 07.03.2017.
*/
$(window).on("load", function () {
$('#loadscreen').css({
'display': 'none'
});
});
scss/_loadscreen.scss
+36
View File
@@ -0,0 +1,36 @@
@import "scss-grid/framework";
//#loadscreen {
@mixin loadscreen {
@include absolute-span();
// Overwrite positioning
position: fixed !important;
text-align: center;
background-color: white;
.loadtable {
display: table;
height: 100%;
width: 100%;
.loadtext {
display: table-cell;
height: 10px;
vertical-align: middle;
font-weight: 700;
animation: blinker 3s ease-in-out infinite;
}
}
@keyframes blinker {
50% { opacity: 0; }
}
}
//}