NP Modal Demo

index.haml

.modal
  .header
    Did you know?
  .content
    6.5 million visitors come to our site every year and only 1/3 donate a dollar to our annual giving fund.  If every person browsing our site donated $1 we would be able to meet our annual budget and therefore, help to feed more homeless across America!
  .actions
    %a.success{href: '#'} Donate $1
    %a{href: '#'} No Thanks
  .loader-bar
    .bar

np-modal-demo.markdown

NP Modal Demo

Modal pop up to attact donations

A Pen by Helana Nosrat on CodePen.

License.

Original code and similar altered versions of this code are under the rights of Mike Rockall, please do not duplicate this version of the code unless okayed through owner of code.

http://codepen.io/mrockall/pen/vEJZaG

http://mikerockall.com/

style.css

body{
  font-family: 'Lato', sans-serif; 
  font-weight: 300;
  background: #ccc;
  color: #505050;
}

.header{
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 20px;
}
.content{
  font-size: 17px;
  line-height: 27px;
  margin-bottom: 30px;
}
.actions{
  
}
.actions a{
  box-sizing: border-box;
  padding: 12px 24px;
  margin: 0 8px;
  line-height: 20px;
  background: #FFF;
  display: inline-block;
  font-family: 'Lato';
  border: 1px solid #ccc;
  color: #666;
  text-decoration: none;
  border-radius: 25px;
  border-color: #239647;
  border-width: 2px;
}
.actions .success{
  border: 2px solid #239647;
  color: #239647;
}

.modal{
  width: 500px;
  padding: 35px 25px;
  background: white;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 10px;
}
.modal .loader-bar{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0.99;
}
.modal .loader-bar .bar{
  position: absolute;
  bottom: 0;
  width: 80px;
  height: 4px;
  background: #239647;
  animation: exordo-loader 3s ease infinite;
  border-radius: 3px;
  transform-origin: 50% 50%;
}
@keyframes exordo-loader {
  0%  {
    transform: translateX(0);
  }
  50% {
    transform: translateX(480px);
  }
  100% {
    transform: translateX(0);
  }
}