eggheadio-projects/egghead-singles: Code repository for single videos on egghead

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Typescript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env

.DS_Store

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Loading animation</title>
    <link rel="stylesheet" href="lib/style.css">
  </head>
  <body>
    <div class="container">
  
      <div class="loading-box">
  
        <div class="loading-inner-box">
  
        </div>
  
      </div>
  
    </div>
  </body>
  </html>

body{
  background: coral;
}
.loading-box{
  margin: 150px;
  height: 75px;
  width: 75px;
  border: 10px solid white;
  transform: rotate(180deg);
  animation: roll 2s infinite ease-out;
}
.loading-inner-box{
  background: white;
  height: 20px;
  animation: fill 2s infinite ease-in ;
}

@keyframes fill{
  0%{
    height: 0px;
  }
  40%{
    height: 75px;
  }
  60%{
    height: 75px;
  }
  100%{
    height: 0px;
  }
}

@keyframes roll{
  0%{
    transform: rotate(180deg);
  }
  40%{
    transform: rotate(180deg);
  }
  60%{
    transform: rotate(360deg);
  }
  100%{
    transform: rotate(360deg);
  }
}