如果我能够自由修改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

相关问题