// base in remark .animsition, .animsition-overlay { position:relative; opacity:0; animation-fill-mode: both; } // overlay option .animsition-overlay-slide { position:fixed; height:100%; width:100%; z-index:1; background-color: #ddd; } // end base in remark // //delete old core loading option // // loading option // .animsition-loading { // position:fixed; // animation-fill-mode: both; // top:0; // width:100%; // height:100%; // z-index: 100; // background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22%23ccc%22%3E%0A%20%20%3Cpath%20opacity%3D%22.25%22%20d%3D%22M16%200%20A16%2016%200%200%200%2016%2032%20A16%2016%200%200%200%2016%200%20M16%204%20A12%2012%200%200%201%2016%2028%20A12%2012%200%200%201%2016%204%22/%3E%0A%20%20%3Cpath%20d%3D%22M16%200%20A16%2016%200%200%201%2032%2016%20L28%2016%20A12%2012%200%200%200%2016%204z%22%3E%0A%20%20%20%20%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22rotate%22%20from%3D%220%2016%2016%22%20to%3D%22360%2016%2016%22%20dur%3D%220.8s%22%20repeatCount%3D%22indefinite%22%20/%3E%0A%20%20%3C/path%3E%0A%3C/svg%3E%0A%0A) center center no-repeat; // &:after { // content:"Loading"; // color: #aaa; // font-size: 16px; // top:50%; // position:fixed; // text-align: center; // width:100%; // margin-top:20px; // } // } // loading in remark /* loading option */ .animsition-loading, .animsition-loading:after { width: 32px; height: 32px; position: fixed; top: 50%; left: 50%; margin-top: -16px; margin-left: -16px; border-radius: 50%; z-index: 100; } .animsition-loading { background-color: transparent; border-top: 5px solid rgba(0, 0, 0, 0.2); border-right: 5px solid rgba(0, 0, 0, 0.2); border-bottom: 5px solid rgba(0, 0, 0, 0.2); border-left: 5px solid #eee; transform: translateZ(0); animation-iteration-count:infinite; animation-timing-function: linear; animation-duration: .8s; animation-name: animsition-loading; } @keyframes animsition-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } // end loading in remark