Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="loadingWrapper">
  <img class="imageLoading" id="starWars" src="data:image/jpg;base64,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">
</div>
<div class="container">
<button id="reloadAnimation" class="button">Reload</button>
 <br>
  <a href="https://codepen.io/abrahamrkj1/pen/NGZPPX" class="button Demo" target="_blank">CUSTOM IMAGE DEMO - Click here >>></button>
 
  
</div>

<footer>
  <a href="https://fb.com/abrahamrkj" target="_blank">FB</a> |  <a href="https://twitter.com/abrahamrkj" target="_blank">Twitter</a>
</footer>
              
            
!

CSS

              
                * {
  background: #000;
}

.loadingWrapper {
  display: table;
  height: 100%;
  width: 100%;
  text-align: center;
}

.imageLoading {
  width: 300px;
  display: table-cell;
  vertical-align: middle;
  margin: 0 auto;
}

#starWars {
  opacity: 0;
}

.container {
  width: 100%;
  position: relative;
}

.button {
  width: 100px;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  background: rgba(197, 231, 241, 0.17);
  color: rgba(255, 255, 255, 0.51);
  border: none;
  padding: 10px;
  font-size: 15px;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: rgba(248, 248, 248, 0.56);
  font-family: BlinkMacSystemFont;
}

footer {
  position: fixed;
  text-align: center;
  width: 100%;
  bottom: 10px;
}
.Demo{
 margin-top: 50px;
    width: 300px;
    height: 16px;
    text-align: center;
    margin-left: -150px;
    display: block;
  color:#fff;
}
              
            
!

JS

              
                function animate(){
    $("#starWars") .velocity("fadeIn", { duration: 1700 });
}

$(document).ready(function(){
  animate();
  $("#reloadAnimation").click(function(){
     $("#starWars") .velocity({opacity:0});
     animate();
  });
});

              
            
!
999px

Console