CodePen Embed - Icons Sweet Alert Personnalisé

	<div class="screenAlert-icon screenAlert-error animate">
		<span class="screenAlert-x-mark">
			<span class="screenAlert-line screenAlert-left animateXLeft"></span>
			<span class="screenAlert-line screenAlert-right animateXRight"></span>
		</span>
		<div class="screenAlert-placeholder"></div>
		<div class="screenAlert-fix"></div>
	</div>

	<div class="screenAlert-icon screenAlert-warning scaleWarning">
		<span class="screenAlert-body pulseWarningIns"></span>
		<span class="screenAlert-dot pulseWarningIns"></span>
	</div>

  <div class="screenAlert-icon screenAlert-info scaleInfo">
    <span class="screenAlert-dot pulseInfoIns"></span>
    <span class="screenAlert-body pulseInfoIns"></span>
  </div>

	<div class="screenAlert-icon screenAlert-success animate">
		<span class="screenAlert-line screenAlert-tip animateSuccessTip"></span>
		<span class="screenAlert-line screenAlert-long animateSuccessLong"></span>
		<div class="screenAlert-placeholder"></div>
		<div class="screenAlert-fix"></div>
	</div>

body{background-color:#111;color:#eee;}

/* CSS ICON ALERT GENERAL */
.screenAlert-icon{border-radius:50%;border:4px solid gray;box-sizing:content-box;height:80px;margin:20px auto;padding:0;position:relative;width:80px}
.screenAlert-icon + .screenAlert-icon {margin-top:50px}



/* CSS SUCCESS */
.screenAlert-icon.screenAlert-success{border-color:#A5DC86}
.screenAlert-icon.screenAlert-success:after,
.screenAlert-icon.screenAlert-success:before{background-color:transparent!important;content:'';height:120px;position:absolute;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:60px}
.screenAlert-icon.screenAlert-success:before{border-radius:120px 0 0 120px;left:-33px;top:-7px;-webkit-transform-origin:60px 60px;transform-origin:60px 60px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.screenAlert-icon.screenAlert-success:after{border-radius:0 120px 120px 0;left:30px;top:-11px;-webkit-transform-origin:0 60px;transform-origin:0 60px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.screenAlert-icon.screenAlert-success .screenAlert-placeholder{border-radius:50%;border:4px solid rgba(165,220,134,0.2);box-sizing:content-box;height:80px;left:-4px;position:absolute;top:-4px;width:80px;z-index:2}
.screenAlert-icon.screenAlert-success .screenAlert-line{background-color:#A5DC86;border-radius:2px;display:block;height:5px;position:absolute;z-index:2}
.screenAlert-icon.screenAlert-success .screenAlert-line.screenAlert-tip{left:14px;top:46px;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:25px}
.screenAlert-icon.screenAlert-success .screenAlert-line.screenAlert-long{right:8px;top:38px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);width:47px}
.animateSuccessTip{-webkit-animation:animateSuccessTip .75s;animation:animateSuccessTip .75s}
.animateSuccessLong{-webkit-animation:animateSuccessLong .75s;animation:animateSuccessLong .75s}
/* ANIMATE SUCCESS */
@-webkit-keyframes animateSuccessTip{0%,54%{width:0;left:1px;top:19px}70%{width:50px;left:-8px;top:37px}84%{width:17px;left:21px;top:48px}100%{width:25px;left:14px;top:45px}}
@keyframes animateSuccessTip{0%,54%{width:0;left:1px;top:19px}70%{width:50px;left:-8px;top:37px}84%{width:17px;left:21px;top:48px}100%{width:25px;left:14px;top:45px}}
@-webkit-keyframes animateSuccessLong{0%,65%{width:0;right:46px;top:54px}84%{width:55px;right:0;top:35px}100%{width:47px;right:8px;top:38px}}
@keyframes animateSuccessLong{0%,65%{width:0;right:46px;top:54px}84%{width:55px;right:0;top:35px}100%{width:47px;right:8px;top:38px}}



/* CSS ALERT */
.screenAlert-icon.screenAlert-error{border-color:#F27474}
.screenAlert-icon.screenAlert-error:after,
.screenAlert-icon.screenAlert-error:before{background-color:transparent!important;content:'';height:120px;position:absolute;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:60px}
.screenAlert-icon.screenAlert-error:before{border-radius:120px 0 0 120px;left:-33px;top:-7px;-webkit-transform-origin:60px 60px;transform-origin:60px 60px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.screenAlert-icon.screenAlert-error:after{border-radius:0 120px 120px 0;left:30px;top:-11px;-webkit-transform-origin:0 60px;transform-origin:0 60px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.screenAlert-icon.screenAlert-error .screenAlert-placeholder{border-radius:50%;border:4px solid rgba(165,220,134,0.2);box-sizing:content-box;height:80px;left:-4px;position:absolute;top:-4px;width:80px;z-index:2}
.screenAlert-icon.screenAlert-error .screenAlert-line{background-color:#A5DC86;border-radius:2px;display:block;height:5px;position:absolute;z-index:2}
.screenAlert-icon.screenAlert-error .screenAlert-line.screenAlert-tip{left:14px;top:46px;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:25px}
.screenAlert-icon.screenAlert-error .screenAlert-line.screenAlert-long{right:8px;top:38px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);width:47px}
.screenAlert-icon.screenAlert-error .screenAlert-x-mark{display:block;position:relative;z-index:2}
.screenAlert-icon.screenAlert-error .screenAlert-placeholder{border:4px solid rgba(200,0,0,0.2)}
.screenAlert-icon.screenAlert-error .screenAlert-line{background-color:#F27474;top:37px;width:47px}
.screenAlert-icon.screenAlert-error .screenAlert-line.screenAlert-left{left:17px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.screenAlert-icon.screenAlert-error .screenAlert-line.screenAlert-right{right:16px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.animateXLeft{-webkit-animation:animateXLeft .75s;animation:animateXLeft .75s}
.animateXRight{-webkit-animation:animateXRight .75s;animation:animateXRight .75s}
/* ANIMATE CROSS X */
@-webkit-keyframes animateXLeft{0%,65%{left:82px;top:95px;width:0}84%{left:14px;top:33px;width:47px}100%{left:17px;top:37px;width:47px}}
@keyframes animateXLeft{0%,65%{left:82px;top:95px;width:0}84%{left:14px;top:33px;width:47px}100%{left:17px;top:37px;width:47px}}
@-webkit-keyframes animateXRight{0%,65%{right:82px;top:95px;width:0}84%{right:14px;top:33px;width:47px}100%{right:16px;top:37px;width:47px}}
@keyframes animateXRight{0%,65%{right:82px;top:95px;width:0}84%{right:14px;top:33px;width:47px}100%{right:16px;top:37px;width:47px}}



/* CSS WARNING */
.screenAlert-icon.screenAlert-warning{border-color:#F8BB86}
.screenAlert-icon.screenAlert-warning:before{-webkit-animation:pulseWarning 2s linear infinite;animation:pulseWarning 2s linear infinite;background-color:transparent!important;border-radius:50%;content:"";display:inline-block;height:100%;opacity:0;position:absolute;width:100%}
.screenAlert-icon.screenAlert-warning:after{background-color:transparent!important;border-radius:50%;content:'';display:block;height:100%;position:absolute;width:100%;z-index:1}
.screenAlert-icon.screenAlert-warning .screenAlert-body{background-color:#F8BB86;border-radius:2px;height:47px;left:50%;margin-left:-2px;position:absolute;top:10px;width:5px;z-index:2}
.screenAlert-icon.screenAlert-warning .screenAlert-dot{background-color:#F8BB86;border-radius:50%;bottom:10px;height:7px;left:50%;margin-left:-3px;position:absolute;width:7px;z-index:2}
.scaleWarning{-webkit-animation:scaleWarning .75s infinite alternate;animation:scaleWarning .75s infinite alternate}
.pulseWarningIns{-webkit-animation:pulseWarningIns .75s infinite alternate;animation:pulseWarningIns .75s infinite alternate}
/* ANIMATE WARNING */
@-webkit-keyframes scaleWarning{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(1.02);transform:scale(1.02)}100%{-webkit-transform:scale(1);transform:scale(1)}}
@keyframes scaleWarning{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(1.02);transform:scale(1.02)}100%{-webkit-transform:scale(1);transform:scale(1)}}
@-webkit-keyframes pulseWarning{0%{background-color:#fff;-webkit-transform:scale(1);transform:scale(1);opacity:.5}30%{background-color:#fff;-webkit-transform:scale(1);transform:scale(1);opacity:.5}100%{background-color:#F8BB86;-webkit-transform:scale(2);transform:scale(2);opacity:0}}
@keyframes pulseWarning{0%{background-color:#fff;-webkit-transform:scale(1);transform:scale(1);opacity:.5}30%{background-color:#fff;-webkit-transform:scale(1);transform:scale(1);opacity:.5}100%{background-color:#F8BB86;-webkit-transform:scale(2);transform:scale(2);opacity:0}}
@-webkit-keyframes pulseWarningIns{0%{background-color:#F8D486}100%{background-color:#F8BB86}}
@keyframes pulseWarningIns{0%{background-color:#F8D486}100%{background-color:#F8BB86}}



/* CSS INFO */
.screenAlert-icon.screenAlert-info{border-color:#9de0f6}
.screenAlert-icon.screenAlert-info:before{-webkit-animation:pulseInfo 2s linear infinite;animation:pulseInfo 2s linear infinite;background-color:transparent!important;border-radius:50%;content:"";display:inline-block;height:100%;opacity:0;position:absolute;width:100%}
.screenAlert-icon.screenAlert-info:after{background-color:transparent!important;border-radius:50%;content:'';display:block;height:100%;position:absolute;width:100%;z-index:1}
.screenAlert-icon.screenAlert-info .screenAlert-body{background-color:#3fc3ee;border-radius:2px;height:47px;left:50%;margin-left:-2px;position:absolute;top:10px;width:5px;z-index:2}
.screenAlert-icon.screenAlert-info .screenAlert-dot{background-color:#3fc3ee;border-radius:50%;bottom:10px;height:7px;left:50%;margin-left:-3px;position:absolute;width:7px;z-index:2}
.scaleInfo{-webkit-animation:scaleInfo .75s infinite alternate;animation:scaleInfo .75s infinite alternate}
.pulseInfoIns{-webkit-animation:pulseInfoIns .75s infinite alternate;animation:pulseInfoIns .75s infinite alternate}
/* ANIMATE INFO */
@-webkit-keyframes scaleInfo{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(1.02);transform:scale(1.02)}100%{-webkit-transform:scale(1);transform:scale(1)}}
@keyframes scaleInfo{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(1.02);transform:scale(1.02)}100%{-webkit-transform:scale(1);transform:scale(1)}}
@-webkit-keyframes pulseInfo{0%{background-color:#fff;-webkit-transform:scale(1);transform:scale(1);opacity:.5}30%{background-color:#fff;-webkit-transform:scale(1);transform:scale(1);opacity:.5}100%{background-color:#9de0f6;-webkit-transform:scale(2);transform:scale(2);opacity:0}}
@keyframes pulseInfo{0%{background-color:#fff;-webkit-transform:scale(1);transform:scale(1);opacity:.5}30%{background-color:#fff;-webkit-transform:scale(1);transform:scale(1);opacity:.5}100%{background-color:#9de0f6;-webkit-transform:scale(2);transform:scale(2);opacity:0}}
@-webkit-keyframes pulseInfoIns{0%{background-color:#3fc3ee}100%{background-color:#9de0f6}}
@keyframes pulseInfoIns{0%{background-color:#3fc3ee}100%{background-color:#9de0f6}}

/* icon sweet alert 
- Alert
- Warning
- Info
- Success
*/

This Pen is owned by KAM3LEON on CodePen.

See more by @Kam3leoN on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.