<?php header ("Refresh: 5;URL=/pages/formulaire_accueil.php?erreur=1"); ?> <!DOCTYPE html> <html lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Courtail - Portail des courriels</title> <!-- Ajouter le favicon <link rel="icon" href="/fichiers/images/favicon.ico" /> --> <style> /* Base */ body { margin: 0; padding: 0; font-family: sans-serif; font-size: 40px; color: #FFF; background-color: #1F527D; text-align: center; } .chargements{ position: absolute; top:40%; margin: 0 auto; width: 100%; } .section { height: 100%; line-height: 100%; } .section-2 { } .section-3 { background-color: #e74c3c; } .section-4 { background-color: #8e44ad; } .chargement { width: 50px; height: 50px; display: inline-block; vertical-align: middle; position: relative; } /* chargements */ .chargement-quart { border-radius: 50px; border: 6px solid rgba(255, 255, 255, 0.4); } .chargement-quart:after { content: ''; position: absolute; top: -6px; left: -6px; bottom: -6px; right: -6px; border-radius: 50px; border: 6px solid transparent; border-top-color: #FFF; -webkit-animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } .chargement-double { border-radius: 50px; border: 6px solid transparent; border-top-color: #FFF; border-bottom-color: #FFF; -webkit-animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } .chargement-double:after { content: ''; position: absolute; top: 5px; left: 5px; bottom: 5px; right: 5px; border-radius: 50px; border: 6px solid transparent; border-top-color: #FFF; border-bottom-color: #FFF; opacity: 0.6; -webkit-animation: spinreverse 2s linear infinite; -moz-animation: spinreverse 2s linear infinite; animation: spinreverse 2s linear infinite; } .chargement-cercles { border-radius: 50px; border: 3px solid transparent; border-top-color: #FFF; -webkit-animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } .chargement-cercles:before, .chargement-cercles:after { content: ''; position: absolute; top: 5px; left: 5px; bottom: 5px; right: 5px; border-radius: 50px; border: 3px solid transparent; border-top-color: #FFF; opacity: 0.8; -webkit-animation: spin 10s linear infinite; -moz-animation: spin 10s linear infinite; animation: spin 10s linear infinite; } .chargement-cercles:before { top: 12px; left: 12px; bottom: 12px; right: 12px; opacity: .5; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; animation: spin 5s linear infinite; } .chargement-barres:before, .chargement-barres:after, .chargement-barres span { content: ''; display: block; position: absolute; left: 0px; top: 0; width: 10px; height: 30px; background-color: #FFF; -webkit-animation: grow 1s linear infinite; -moz-animation: grow 1s linear infinite; animation: grow 1s linear infinite; } .chargement-barres:after { left: 15px; -webkit-animation-delay: -0.66s; -moz-animation-delay: -0.66s; animation-delay: -0.66s; } .chargement-barres span { left: 30px; -webkit-animation-delay: -0.33s; -moz-animation-delay: -0.33s; animation-delay: -0.33s; } /* Animations */ @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @keyframes spin { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes spinreverse { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); } } @-moz-keyframes spinreverse { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(-360deg); } } @keyframes spinreverse { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-webkit-keyframes grow { 0% { -webkit-transform: scaleY(0); opacity: 0; } 50% { -webkit-transform: scaleY(1); opacity: 1; } 100% { -webkit-transform: scaleY(0); opacity: 0; } } @-moz-keyframes grow { 0% { -moz-transform: scaleY(0); opacity: 0; } 50% { -moz-transform: scaleY(1); opacity: 1; } 100% { -moz-transform: scaleY(0); opacity: 0; } } @keyframes grow { 0% { -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); opacity: 0; } 50% { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); opacity: 1; } 100% { -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); opacity: 0; } } </style> </head> <body> <div class="chargements"> <section class="section section-2"> <span class="chargement chargement-double"></span> Traitement... </section> </div> </body> </html>