PROGRESS BAR

dabblet.css

/* PROGRESS BAR */

p {color:red;}

.progress-bar { 
   position: relative;
   top: 5px;
   width: 680px; 
   height: 100px;
   background: #000;
   animation: fullexpand 60s ease-out infinite;
}

/* ANIMATION BAR */

@keyframes fullexpand {
   /* In these keyframes, the progress-bar is stationary */
   0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }

   /* In these keyframes, the progress-bar starts to come alive */
   4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }

   /* In these keyframes, the progress-bar moves forward for 3 seconds */
   16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }

   /* In these keyframes, the progress-bar has finished his path */
   17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }

   /* In these keyframes, the progress-bar will disappear and then resume the cycle */
   18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

dabblet.html

<div class="progress-bar"> <p>loading... </p> </div>

settings.json

{"view":"split","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"}