.i-load-more { width: 65%; margin: 1.5em auto; line-height: 1.6em; font-size: 14px; text-align: center; } .i-load-more-loading { display: inline-block; margin-right: 12px; vertical-align: middle; width: 14px; height: 14px; background: 0 0; border-radius: 50%; border: 2px solid #e9eaec; border-color: #e9eaec #e9eaec #e9eaec #2d8cf0; animation: btn-spin 0.6s linear; animation-iteration-count: infinite; } .i-load-more-tip { display: inline-block; vertical-align: middle; /* color: #495060; */ color: #999; /* text-align: center; margin: 20px 0; */ font-size: 12px; } .i-load-more-line { border-top: 1px solid #dddee1; display: flex; border-top: 0; } .i-load-more-line::before { position: relative; top: -1px; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; content: ''; border-top: 1px solid #dddee1; } .i-load-more-line::after { position: relative; top: -1px; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; content: ''; border-top: 1px solid #dddee1; } .i-load-more-line .i-load-more-tip { position: relative; top: -0.9em; padding: 0 0.55em; } .i-load-more-empty { width: 4px; height: 4px; border-radius: 50%; background-color: #e5e5e5; display: inline-block; position: relative; vertical-align: 0; top: -0.16em; } @keyframes btn-spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }