POC bouton de rechargement

dabblet.css

/**
 * POC bouton de rechargement
 */  
  @keyframes move-up {
    from { 
      transform: translateY( 100% ) translateZ( 0 );
      opacity: 0;
    }    
  }
  
  @keyframes rotation {
    from { transform: rotate( 0deg) translateZ( 0 ); }
    to { transform: rotate( 359deg ) translateZ( 0 ); }    
  }
  
  body { font-size: 62.5%; }
  
 .stats {
   animation: move-up 800ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
   background: #222;
   background: rgba( 0, 0, 0, .8 );
   border: 1px solid black;
   border-radius: 5px;
   bottom: 1em;
   box-shadow: inset 1px 1px 0 rgba( 255, 255, 255, .25 );
   color: white;
   color: rgba( 255, 255, 255, .75 );
   font: 1.2em/1.4 sans-serif;
   left: 1em;
   padding: .75em;
   position: fixed;
   text-shadow: 1px 1px 2px black;
   z-index: 1000;  
 }
 
 .stats p { margin-top: 0; }
 
 .stats span {
   display: inline-block;
   width: 2.5em;
 }
 
 .stats abbr { cursor:  help; }
 
 .stats b {
   color: white;
   display: inline-block;
   font-family: monospace;
   font-size: 1.4em;
   text-align: right;
   min-width: 4em;
 }
 
 .stats i b::before {
   content: "en";
   color: white;
   color: rgba( 255, 255, 255, .75 );
   font: italic small sans-serif;
   padding-right: .4em;
 }
 
 [id="stats-button"] {
   background-color: #0e90d2;  
   background-image: linear-gradient( to bottom, rgba( 0, 0, 0, .1 ) 0%, rgba( 0, 0, 0, .5 ) 100% );
   background-position: 0 0;
   background-size: auto 150%;
   border: 1px solid black;
   border-radius: 5px;
   box-shadow: inset 1px 1px 0 rgba( 255, 255, 255, .25 );
   color: white;
   cursor: pointer;
   font-size: 1em;
   padding: .75em .5em;
   position: relative;
   text-shadow: 1px 1px 2px black;
   transition: all .3s linear;
 }
 
 [id="stats-button"]:hover,
 [id="stats-button"]:focus {
   background-position: 0 100%;
 }
 
 [id="stats-button"].actif:hover,
 [id="stats-button"].actif:focus,
 [id="stats-button"].fini:hover,
 [id="stats-button"].fini:focus {
   background-position: 0 0;
 }

 [id="stats-button"].actif {
   background-color: #8058a5;
   padding-right: 3em;
 }

 [id="stats-button"].fini {
   background-color: #5eb95e;
   padding-right: 3em;
 }
 
  [id="stats-button"]::after {
 	border: 3px solid transparent;
 	content: "";
  	height: 1em;
  	position: absolute;
  	right: 1em;
  	top: 1em;
	width: 1em;
 }
 
 [id="stats-button"].actif::after {
 	animation: rotation .5s infinite linear;
 	border-top-color: white;
 	border-radius: 100%;
 }
 
  [id="stats-button"].fini::after {
 	animation: none;
  	border-color: white white transparent transparent;
  	border-radius: 2px;
  	border-width: 4px;
  	box-shadow: 1px -1px 1px rgba( 0, 0, 0, .5 );
  	height: .4em;
  	right: .75em;
  	top: .75em;
  	transform: rotate( 130deg ) translateZ( 0 );
 }
 
 @media screen and (min-width: 1280px) {
 	.stats { 
 		font-size: 1.6em;
 		padding: 1em;
 	}
 	
 	.stats b { min-width: 3em; }
 	
 	[id="stats-button"] { padding: 1em; }
 }

dabblet.html

<div class="stats">
	<p>
	  <span><abbr lang="en" title="Lightweight Directory Access Protocol">LDAP</abbr></span>
	  <b>3 </b>
	  <i> 
	    <b>44</b>
	    <small>
	      <abbr title="milliseconde">ms</abbr>
	    </small>
	  </i>
	</p>
	<p>
	  <span><abbr lang="en" title="Structured Query Language">SQL</abbr></span>
	  <b>6 </b>
	  <i> 
	    <b>23</b>
	    <small>
	      <abbr title="milliseconde">ms</abbr>
	    </small>
	  </i>
	</p>
	
	<button id="stats-button" class="">Recharger les ressources</button>	
</div>

dabblet.js

var bouton = document.getElementById('stats-button');

	bouton.onclick = function() {
		bouton.classList.toggle("actif");		
		setTimeout(function(){				
			bouton.classList.toggle("fini");
		}, 2000);
	}

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}