如果我能夠自由修改html，我能夠做到這一點，但問題是我只能使用這個特定的佈局來製作此Spinner。如何在Spinner內添加圖標

，我想說明的是微調這樣的事情，

有肚裏一圈又一圈灰色路徑粉色微調並在其中保持靜止中間的圖標。

的問題是我得上述微調與眼前這個HTML佈局

只有一個div

<div class="spinner"></div>

事業部裏面的圖標工作。

<div class="spinner"> 
<i class="mickey"></i> 
</div>

圖標字體或圖像可用於中間的圖標。

編輯：鏈接到JSFiddle

來源

2017-04-03 user3607282

請添加您的代碼，你已經嘗試過。 – frnt

在這裏，你可以試試這個即使使用pseudo selector :before,:after或declaring another div爲spinner如圖LGSon，你做了什麼是你在parent div上申請transform:rotate這就是爲什麼它是rotating整個div，所以儘量如下，

.spinner{ 
 
    width:100px; 
 
    height:100px; 
 
    border-radius:50%; 
 
    border:10px solid #111; 
 
    margin:10% 40%; 
 
    position:relative; 
 
    z-index:1; 
 
} 
 
.spinner:before{ 
 
    content:''; 
 
    width:100px; 
 
    height:100px; 
 
    border-radius:50%; 
 
    border-top:10px solid #ccc; 
 
    border-right:10px solid transparent; 
 
    border-bottom:10px solid transparent; 
 
    border-left:10px solid transparent; 
 
    position:absolute; 
 
    z-index:9; 
 
    top:-10px; 
 
    left:-10px; 
 
    animation:rt 2s infinite; 
 
} 
 
@keyframes rt{ 
 
    from{ 
 
    transform:rotate(0deg); 
 
    } 
 
    to{ 
 
    transform:rotate(360deg); 
 
    } 
 
} 
 
.spinner > .fa{ 
 
    font-size:32px; 
 
    text-align:center; 
 
    display:block; 
 
    margin:30% 0; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 

 
<div class="spinner"> 
 
<i class="fa fa-anchor"></i> 
 
</div>

來源

2017-04-03 08:58:30 frnt

@ user3607282希望這能奏效。 – frnt

Got it！是的，它的工作原理。這正是我想要的。非常感謝你！ – user3607282

加1爲僞 – LGSon

像這樣也許

.test { 
 
    display: inline-block; 
 
    padding: 20px; 
 
} 
 
.spinner-circle { 
 
    width: 50px; 
 
    height: 50px; 
 
    position: relative; 
 
    margin: 20px; 
 
} 
 
.spinner { 
 
    height: 100%; 
 
    width: 100%; 
 
    border-radius: 50%; 
 
    border: 5px solid rgba(0,0,0,0.3); 
 
    border-right: 5px solid red; 
 
    animation: rotate--spinner 1.6s linear infinite; 
 
    box-sizing: border-box; 
 
} 
 
.icon { 
 
    position: absolute; 
 
    left: 50%; top: 50%; 
 
    transform: translate(-50%,-50%); 
 
    font-size: 50px; 
 
} 
 

 
@keyframes rotate--spinner { 
 
    from { 
 
    transform: rotate(0); 
 
    } 
 
    to { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="test"> 
 
    <div class="spinner-circle"> 
 
    <div class="spinner"></div> 
 
    <i class="icon fa fa-anchor"></i> 
 
    </div> 
 
</div>

來源

2017-04-03 08:38:49 LGSon

這裏是我去

HTML

<div class="loader-container"> 
    <span>icon</span> 
    <div class="loader"></div> 
</div>

CSS

.loader { 
    border: 16px solid #f3f3f3; 
    /* Light grey */ 
    border-top: 16px solid #3498db; 
    /* Blue */ 
    border-radius: 50%; 
    width: 120px; 
    height: 120px; 
    animation: spin 2s linear infinite; 
} 

.loader-container { 
    position: relative; 
    display: inline-block; 
} 

.loader-container span { 
    position: absolute; 
    top: 45%; 
    left: 45%; 
} 

@keyframes spin { 
    0% { 
     transform: rotate(0deg); 
    } 
    100% { 
     transform: rotate(360deg); 
    } 
}

Codepen

來源

2017-04-03 09:07:08 NooBskie

如何在Spinner內添加圖標

回答

HTML

CSS

相關問題